1

我有这段代码可以工作，但是当项目被移动时，它会显示在列表的底部。我宁愿保持字母顺序，不知道从哪里开始。

<!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>
4

1 回答 1

2

你可以使用 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
        });
    });   
});​

http://jsfiddle.net/e6Y7J/

于 2012-10-03T16:40:29.227 回答