克隆选择列表后,jquery删除/添加选择选项

时间:2011-06-01 08:16:31

标签: javascript jquery jquery-selectors

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

例如,具有以下内容:

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

当我点击“克隆”按钮时,它将仅使用尚未选择的那些选项克隆选择列表。

例如:选择选项“一些服务” - &gt;命中克隆 - &gt;新选择列表仅添加选项值:2和3。

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

编辑: 为了更好地可视化,这里是屏幕截图: enter image description here

情景:

  1. 我开始只有1下拉 列表(有5个选项)=&gt; 1,2,3,4,5 - &gt;默认选择第一个选项。
  2. 我点击克隆 - &gt; 新列表添加了ONLY选项 2,3,4,5。
  3. 我选择选项5(在选择列表中)

    2)

  4. 我点击克隆 - &gt;添加了新列表(#3) 只有选项2,3,4
  5. 我选择选项2(在选择列表中)

    3)

  6. 我点击克隆 - &gt;新名单(#4)是 使用选项3,4
  7. 创建

    ..等等。

    现在,当我删除选择列表#2(或任何其他选择列表)时,这意味着所有选择列表应重新刷新并包含已删除选择列表中的所选选项(在我们的情况下为#2)

    帮助。 感谢

1 个答案:

答案 0 :(得分:3)

这似乎符合您的要求: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 />');
});