Home/ Questions/Q 8627615
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T08:19:30+00:00

I have this code that is working but when the item is moved, it

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0