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>