Переместить и удалить элемент списка в другой список с помощью jQuery в одном и том же месте

Question

У меня есть 2 многопозиционных блока, как в этой ссылке. 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"); 
     }); 
    }); 
}); 

Но когда я добавить от одного первого выбора поля второго выбора окна он работает нормально для me.But еще раз, когда я добавить от второго выбора поля первого выбора окна они добавление к последним из первых выберите box.But, что я хочу, мне нужно добавить, они должны быть добавлены в место , где они удалены.

Спасибо заранее ...

Answer 1

Может быть, вы можете просто установить и удалить атрибут «инвалид», но это будет оставить пустое место в опциях. Обратите внимание, что с помощью этого метода вам нужно будет клонировать этот параметр в первый раз.

Другое решение whould бы добавить содержание, как обычно, но применяющий вид функции() перед

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"); 
     }); 
    }); 
}); 

Вы можете попробовать на этом fiddle

Answer 2

Вам нужно следить за какой-то индекс , Я думаю, что в вашем случае вы можете использовать value каждого варианта. (но вы можете использовать выделенный атрибут data-*, если вам нужно)

С помощью этого значения вы можете выполнить поиск в текущем списке и посмотреть, где он должен вписываться. Заверните параметры и проверьте, что значение больше, чем вы перемещение. Если вы найдете его, тогда вставьте его до этого, если вы не преуспеете, а затем вставьте его в конец.

Это следует сделать это:

$("#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); 
    }); 
}); 

Вы можете применить то же самое для обратного тоже.

Here is a working example

Answer 3

После добавления параметров обратно #list1, простой sort() сделает все остальное. Для этого нам нужно добавить к нему функцию сравнения на основании значения .

$(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(); 
    } 
}); 

Заканчивать этот JSFiddle

Вы можете также отсортировать с помощью text() вместо val(), изменив его в optionSort().