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

如果您有多个select元素（＆＃34;可以是一个或多个值＆＃34;），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

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

根据可能值列表删除选项
从选择框中获取所选值

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

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

Answer 4

这应该有效：

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

如果你想删除第3个选项。

jQuery - 从父列表中删除所选选项

4 个答案: