Transferring an option between two selects?

Question

JavaScript

There are two selects, one is all the services of the enterprise, the second is only the selected services. All services are formed in the left select and when clicked they are transferred to the right one. When you click on the right, they are transferred back.
Everything is beautiful, everything works.

I transfer like this:

$('#select1 option').live('click', function() {<br>
    var html = this.outerHTML;<br>
    $(this).remove();<br>
<br>
    $('#select2').append(html);<br>
  })<br>
  $('#select2 option').live('click', function() {<br>
    var html = this.outerHTML;<br>
    $(this).remove();<br>
<br>
    $('#select1').append(html);<br>
  })<br>

The option is added to the end.
So the question is: how to put the option in its place, and not at the end, during the reverse transfer?

Well, that is, I chose the 2.3 option, the current 1.4 remained on the left. How to understand that option 3, when clicked again in the right select, should return between 1 and 4 on the left, given that there is no 2nd from the left, and maybe not even the 4th?

Or how to sort options after insertion at the end of the list, by value value?

Answer 1

Options are also sorted by name, and value are numbers. That is, value are not in order. I forgot about it.
And index cannot be written, since only the last index is remembered, and if I throw 5 elements to the left and start inserting them at this index, they will be one after another.
I did it in a loop like this (the data-num = 'number in order in the list' parameter was added to the option):

  $('#select1 option').live('click', function() {
    var html = this.outerHTML;
    $(this).remove();

    $('#select2').append(html);
  })
  $('#select2 option').live('click', function() {
    var html = this.outerHTML;
    var index = $(this).data('num');
    $(this).remove();
    
    inserted = 0; // Задаем индикатор вставки оптиона
    $('#select1 option').each(function() {
      var ind = $(this).data('num');
      if (index < ind) {
        $(html).insertBefore(this);
        inserted = 1; // Оптион был вставлен на место
        return false;
      }
    })
    if (inserted == 0) {$('#select1').append(html);} // Если не был вставлен - значит он 
                               // последний в текущем списке, засовываем его в конец
  })

I haven't come up with anything better yet, and this design works great. Thanks for the help!

Answer 2

It is necessary to write option both in the right select and in the left.
Only in one select are they style="display:none".
When moving an item in one select, we do jQuery('').hide(), and in the other jQuery('').show().
And it will work much faster, since there will be no need to force the DOM.

Answer 3

Why do you keep doing

var html = this.outerHTML;
$(this).remove();
$('#select2').append(html);

Is this code

$('#select2').append($(this));

not similar to it?