克隆选择列表后，jquery删除/添加选择选项 [英] jquery remove/add select options after cloning select list

问题描述

我需要能够克隆下拉列表并仅过滤那些尚未在选择列表组中选择的选项。

I need to be able to clone a drop down list and filter only those options that were NOT yet selected in the group of select lists.

例如，拥有以下内容：

<select name="SelectService" class="selService">
<option value="1">Some service</option>
<option value="2">Another one</option>
<option value="3">One more</option>
</select>

当我点击克隆按钮时，它将克隆选择列表，只包含那些没有的选项已被选中。

When i click the "clone" button it would clone the select list with ONLY those options that have NOT been yet selected.

例如：选择选项某些服务 - >命中克隆 - >新选择列表仅添加选项值：2和3。

ex: select option "Some service" -> hit clone -> new select list is added with only option values: 2 and 3.

等。克隆和删除选择列表将根据目前为止选择的选项重新填充选择列表。

etc..cloning and removing select lists would re-fill the select lists based on options selected so far.

编辑：
以更好地形象化这里是屏幕截图：

to better visualize it here is the screen shot:

情景：

1. 我开始时只有1个下拉
   列表（有5个选项）=>
   1,2,3,4,5 - >默认选择第一个选项。


2. 我点击克隆 - >
   新列表添加了ONLY选项
   2,3,4,5。


3. 我选择选项5（在选择列表中
   
   

   2）



4. 我点击了克隆 - >新列表（＃3）添加了
   只有选项2,3,4


5. 我选择选项2（在选择列表中
   
   

   3）



6. 我点击克隆 - >新列表（＃4）是使用选项3,4创建的
   

1. i start off with only 1 drop down list (that has 5 options) => 1,2,3,4,5 -> first options is selected by default.
2. I hit clone -> new list is added with ONLY options 2,3,4,5.
3. i select option 5 (in select list

   2)

4. I hit clone -> new list (#3) is added with ONLY options 2,3,4
5. i select option 2 (in select list

   3)

6. I hit clone -> new list (#4) is created with options 3,4

..等等。

现在，当我删除选择列表＃2（或任何其他选择列表）时，这意味着所有选择列表应重新刷新并包含所选已删除选择列表中的选项（在我们的示例中为＃2）

Now, When I remove Select list #2 (or any other select list) that means ALL select lists should re-fresh and include the selected option from deleted select list (in our case #2)

帮助。
谢谢

Help. thanks

推荐答案

这似乎做你想做的事： http://jsfiddle.net/infernalbadger/SKVSu/1/

This seems to do what you want: http://jsfiddle.net/infernalbadger/SKVSu/1/

$('#clone').click(function() {
    var original = $('select.selService:eq(0)');
    var allSelects = $('select.selService');
    var clone = original.clone();

    $('option', clone).filter(function(i) {
        return allSelects.find('option:selected[value="' + $(this).val() + '"]').length;
    }).remove();

    $('#target').append(clone).append('<br />');
});

这篇关于克隆选择列表后，jquery删除/添加选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！