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

如果要刪除第三個選項。