jQuery Déplacer l’élément d’une zone de sélection à une autre tout en conservant l’ordre d’affichage

J’ai ce code qui fonctionne, mais lorsque l’élément est déplacé, il apparaît au bas de la liste. Je préférerais garder l’ordre alphabétique et ne pas savoir par où commencer.

    demo   .whatever { width:200px; height:50px; overflow:auto }  //      Option 1 Option 2 Option 3 Option 4    
   Option 1 Option 2 Option 3 Option 4

Vous pouvez utiliser la méthode de sorting pour conserver l’ordre souhaité.

EXEMPLE sortinger par vos valeurs d’option

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

Vous pouvez raccourcir un peu votre code si vous avez vos éléments de sélection relatifs en tant que frères et soeurs dans un div parent à l’aide de frères et soeurs

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