HTML JQuery перемещать элементы с ListBox в другой ListBox затем перемещать элементы вверх и вниз

Question

У меня есть ListBox, и я могу перемещать элементы в другой ListBox с этим кодом

$().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> 

С кодом выше можно перемещать элементы из ListBox1 в listbox2 и все работает отлично.

мне нужно перемещать элементы в listbox2 вверх и вниз

Я гугл и нашел, что яваскрипт кода, но я не знаю, как я могу использовать его для listbox2 только

https://jsfiddle.net/m0f757wh/

Answer 1

Refer to this question.

Я только что добавил слушателей событий к кнопкам и следовал за вышеуказанным сообщением. Я думаю, что код не требует пояснений. Дайте мне знать, если вы в замешательстве.

$().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>