jQuery Move Item from one select box to another while retaining listing order

Question

I have this code that is working but when the item is moved, it shows up at the bottom of the list. I'd prefer to keep the order alphabetical and have no idea where to start.

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

Maybe try sorting the new select box like this: http://stackoverflow.com/questions/278089/javascript-to-sort-contents-of-select-element — MikeB, Oct 03 '12 at 16:24

score 2 · Accepted Answer · answered Oct 03 '12 at 16:40

You can use the sort method to keep the order you want

EXAMPLE sort by your option values

 youroptions.sort(function(a,b){
       return a.value - b.value;
 });

You can shorten your code quite a bit if you have your relative select elements as siblings inside a parent div by using siblings

$(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/

jQuery Move Item from one select box to another while retaining listing order

1 Answers1

Linked