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

Question

I have list 1:

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

And list 2:

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

I want to use jQuery to remove from list2 the list1's selected value(s). Can be one or more values.

I'm using this code to add options from list 1 to list 2:

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

Answer 1

If you have multiple select element ("Can be one or more values"), the val method returns an array of selected values. You can use that array for filtering the corresponding option elements:

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

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

Answer 2

to remove option in list2 chosen from list1

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

DEMO

Answer 3

You can separate the logic into two distinct functions:

1. Remove options based on a list of possible values
2. Get selected values from a select box

Depending on whether you've specified multiple attribute in the select box, the selected value will either be an array or a single value.

 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

This should work:

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

if you want to remove the 3rd option.