我有这段代码可以正常工作，但是当项目被移动时，它会显示在列表的底部。我更愿意按字母顺序排列，但不知道从哪里开始。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<style type='text/css'>
.whatever {
width:200px;
height:50px;
overflow:auto
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#select1').click(function(){
$('#select1 option:selected').appendTo('#select2');
});
$('#select2').click(function(){
$('#select2 option:selected').appendTo('#select1');
});
$('#select3').click(function(){
$('#select3 option:selected').appendTo('#select4');
});
$('#select4').click(function(){
$('#select4 option:selected').appendTo('#select3');
});
});//]]>
</script>
</head>
<body>
<div>
<select multiple id="select1" class="whatever">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<img src="../Common/MultiSelect/img/switch.png">
<select multiple id="select2" class="whatever"></select>
</div>
<div>
<select multiple id="select3" class="whatever">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<img src="../Common/MultiSelect/img/switch.png">
<select multiple id="select4" class="whatever"></select>
</div>
</body>
</html>
最佳答案
你可以使用sort方法来保持你想要的顺序
示例按您的选项值排序
youroptions.sort(function(a,b){
return a.value - b.value;
});
如果在父 div 中使用兄弟元素将相对选择元素作为兄弟元素，则可以大大缩短代码
$(document).ready(function() {
$('select').change(function() {
var $this = $(this);
$this.siblings('select').append($this.find('option:selected')); // append selected option to sibling
$('select', $this.parent()).each(function(i,v){ // loop through relative selects
var $options = $(v).find('option'); // get all options
$options = $options.sort(function(a,b){ // sort by value of options
return a.value - b.value;
});
$(this).html($options); // add new sorted options to select
});
});
});
关于javascript - jQuery 将项目从一个选择框移动到另一个选择框，同时保留列表顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12712660/