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>