Move and delete a list item to another list using jQuery in the same places

Question

I have 2 multi-position blocks, as in this link. http://jsfiddle.net/bdMAF/38/

$(function(){ $("#button1").click(function(){ $("#list1 > option:selected").each(function(){ $(this).remove().appendTo("#list2"); }); }); $("#button2").click(function(){ $("#list2 > option:selected").each(function(){ $(this).remove().appendTo("#list1"); }); }); }); 

But when I add from one first selection window to the second selection box, it works fine for me.But again, when I add from the second selection window to first select the field that they add to the last of the first select box.But what I want, I need to add, they must be added to the place where they are deleted.

Thanks in advance...

Answer 1

Perhaps you can simply set and remove the disabled attribute, but it will leave a blank space in the options. Note that with this method you will have to clone this parameter first.

Another solution, which would be to add content as usual, but using the sort () function before

 function byValue(a, b) { return a.value > b.value ? 1 : -1; }; function rearrangeList(list) { $(list).find("option").sort(byValue).appendTo(list); } $(function () { $("#button1").click(function () { $("#list1 > option:selected").each(function () { $(this).remove().appendTo("#list2"); rearrangeList("#list2"); }); }); $("#button2").click(function () { $("#list2 > option:selected").each(function () { $(this).remove().appendTo("#list1"); rearrangeList("#list1"); }); }); }); 

You can try fiddle

Answer 2

You need to track some kind of index, I think in your case you can use value for each option. (but you can use the highlighted data-* attribute if you need to)

Using this value, you can search the current list and see where it should fit. Complete the parameters and verify that the value is greater than the one you are moving. If you find it, then insert it before that, if you do not succeed, then insert it at the end.

This should do it:

 $("#button2").click(function(){ $("#list2 > option:selected").each(function(){ var item = $(this).remove(); var match = null; $("#list1").find("option").each(function(){ if($(this).attr("value") > item.attr("value")){ match = $(this); return false; } }); if(match) item.insertBefore(match); else $("#list1").append(item); }); }); 

You can apply the same thing to the opposite.

Here is a working example

Answer 3

After adding parameters to #list1 simplest sort() will do the rest. To do this, we need to add a comparison function to it based on its value .

 $(function () { $("#button1").click(function () { $("#list1 > option:selected").each(function () { $(this).remove().appendTo("#list2"); }); }); $("#button2").click(function () { $("#list2 > option:selected").each(function () { $(this).remove().appendTo("#list1"); var opts = $('#list1 option').get(); $('#list1 ').html(opts.sort(optionSort)); }); }); function optionSort(a, b) { return $(a).val() > $(b).val(); } }); 

Check out JSFiddle

You can also sort using text() instead of val() by changing it in optionSort() .