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, чтобы удалить из песни2 выбранной стоимости 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

Это должно работать:

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

, если вы хотите, чтобы удалить 3-й вариант.

Answer 3

удалить опцию в list2 выбираемый из list1

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

DEMO

Answer 4

Вы можете отделить логику в двух различных функций:

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>