Как удалить параметры из выбранного элемента с помощью jquery?

Question

У меня есть n выпадающих меню, подобных этому:

<select id="select1">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<select id="select2">
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>

с одинаковыми параметрами.Все варианты должны быть уникальными, поэтому, если опция выбрана в одном комбинированном списке, она должна быть удалена из других.Таким образом, если пользователь выбирает «1» в select1, в select2 будут только опции «2» и «3».

Теперь jQuery отключает опции SELECT на основе выбранного радио (нужна поддержка всехбраузеры) предлагает хорошее решение, но как я могу изменить это для работы с переключателями вместо переключателей?

Answer 1

Это то, что вы имеете в виду?

Это удалит все из #select2, что было в #select1:

$("#select2 option").each(function() {
    if($("#select1 option[value=" + this.value + "]").length)
        $(this).remove();
});

Вот еще одна альтернатива, которая удаляет все дубликаты:

$("select").each(function() {
  var select = $(this);  
  select.children("option").each(function() {
    $('select').not(select).children("option[value=" + this.value + "]").remove();
  });
});

При этом удаляется каждый дубликат, оставляя параметр только в первом <select>, в котором он был найден.

Обновление для вашего комментария:

$("#select1").change(function() {
 $("#select2 option[value=" + $(this).val()+ "]").remove();
});

Answer 2

В качестве альтернативы, если выборки имеют одинаковые параметры в одинаковом порядке.

$('select').change(function() {
    var selectedIndex = $(this).find(':selected').index();    
    $('select').not(this).find('option:nth-child(' + selectedIndex + ')').remove();
)};

Я думаю, что этот способ быстрее (но не так легко читается).