html jquery将项目从列表框移动到其他列表框，然后上下移动项目

Question

我有列表框，我可以使用此代码将项目移动到另一个列表框

$().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中的项目

我用Google搜索并发现javascript代码，但我不知道如何才能将它用于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>