html jquery bewegen Artikel von listbox zu anderen listbox dann Elemente oben und unten bewegen

Question

Ich habe listbox und ich kann Elemente in einem anderen listbox mit diesem Code

$().ready(function() { 
    $('#add').click(function() { 
    return !$('#select1 option:selected').remove().appendTo('#select2'); 
    }); 
    $('#remove').click(function() { 
    return !$('#select2 option:selected').remove().appendTo('#select1'); 
    }); 
    }); 

<select multiple="multiple" name="listbox1" id="select1"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
</select> 
</td> 
<td> 
<a href="#" id="add">&gt;&gt;</a><br/> 
<a href="#" id="remove">&lt;&lt;</a> 
<select multiple="multiple" name="listbox2" id="select2"></select> 

Mit dem Code bewegen oben ich Elemente aus ListBox1 bewegen kann Listbox2 und alles funktioniert gut.

Ich brauche Artikel in ListBox2 bis bewegen und

unten

ich gegoogelt und fand, dass JavaScript-Code, aber ich weiß nicht, wie ich es für ListBox2

nur

https://jsfiddle.net/m0f757wh/

Answer 1

Refer to this question.

verwenden können

Ich habe gerade Ereignis-Listener zu den Schaltflächen hinzugefügt und folgte dem obigen Beitrag. Ich denke, der Code ist selbsterklärend. Lass es mich wissen, wenn du verwirrt bist.

$().ready(function() { 
 
    $('#add').click(function() { 
 
    return !$('#select1 option:selected').remove().appendTo('#select2'); 
 
    }); 
 
    
 
    $('#remove').click(function() { 
 
    return !$('#select2 option:selected').remove().appendTo('#select1'); 
 
    }); 
 
    
 
    let $select1 = $('#select1'); 
 
    let $select2 = $('#select2'); 
 
    
 
    $('#up1').click(function() { 
 
    let $selected = $select1.find('option:selected'); 
 
    $selected.insertBefore($selected.prev()); 
 
    }); 
 
    
 
    $('#down1').click(function() { 
 
    let $selected = $select1.find('option:selected'); 
 
    $selected.insertAfter($selected.next()); 
 
    }); 
 
    
 
    $('#up2').click(function() { 
 
    let $selected = $select2.find('option:selected'); 
 
    $selected.insertBefore($selected.prev()); 
 
    }); 
 
    
 
    $('#down2').click(function() { 
 
    let $selected = $select2.find('option:selected'); 
 
    $selected.insertAfter($selected.next()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <select multiple="multiple" name="listbox1" id="select1"> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <a href="#" id="add">&gt;&gt;</a><br/> 
 
     <a href="#" id="remove">&lt;&lt;</a> 
 
     <select multiple="multiple" name="listbox2" id="select2"></select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <button id="up1">&uarr;</button> 
 
     <button id="down1">&darr;</button> 
 
    </td> 
 
    <td> 
 
     <button id="up2">&uarr;</button> 
 
     <button id="down2">&darr;</button> 
 
    </td> 
 
    </tr> 
 
</table>