jQuery-从父列表中删除选择的选项

Question

我有清单1：

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw" selected>VW</option>
  <option value="audi">Audi</option>
</select> 

清单2：

<select>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
</select>

我想使用jQuery从list2中删除list1的选定值。 可以是一个或多个值。

我正在使用此代码从列表1到列表2添加选项：

var options = $("#list1 option:selected").clone();
$("#list2 select").append(options);

Answer 1

如果您有多个选择元素（“可以是一个或多个值”），则val方法将返回所选值的数组。 您可以使用该数组来过滤相应的选项元素：

var vals = $('#list1 select').val();

$('#list2 option').filter(function() {
   return vals.indexOf(this.value) > -1;
}).remove();

Answer 2

删除从list1中选择的list2中的选项

$('#list1').on('change',function(){
    var thisval = $(this).val();
        $("#list2 option[value='"+thisval+"']").remove();
});

DEMO

Answer 3

您可以将逻辑分为两个不同的功能：

1. 根据可能的值列表删除选项
2. 从选择框中获取选择的值

根据您是否在选择框中指定了multiple属性，所选值将为数组或单个值。

 function remove_options(select, values) { $('> option', select).filter(function() { return values.indexOf(this.value) != -1; }).remove(); } function selected_values(select) { var values = $(select).val(); return $.isArray(values) ? values : [values]; } remove_options('#list2', selected_values('#list1')); remove_options('#list2_multiple', selected_values('#list1_multiple')); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="list1"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="vw" selected>VW</option> <option value="audi">Audi</option> </select> <select id="list2"> <option value="saab">Saab</option> <option value="vw" selected>VW</option> </select> <select id="list1_multiple" multiple="multiple"> <option value="volvo">Volvo</option> <option value="saab" selected>Saab</option> <option value="vw" selected>VW</option> <option value="audi">Audi</option> </select> <select id="list2_multiple" multiple="multiple"> <option value="saab">Saab</option> <option value="vw" selected>VW</option> </select> 

Answer 4

这应该工作：

function removeOption (i) {
    $("#list2 select > option:eq("+i+")").remove();
}
removeOption(2);

如果要删除第三个选项。