выберите один элемент из раскрывающегося списка удалить из других выпадающих списков JQuery

Question

У меня есть несколько выпадающих списков с одинаковыми параметрами. Мой код отлично работает, когда пользователь выбирает первый элемент выпадающих списков, после чего элемент удаляется для второго и третьего выпадающих списков. Аналогично это происходит для второго выпадающего списка. Но проблема возникает, когда я сначала выбираю элемент второго выпадающего списка. Автоматически первый выпадающий список пуст, если я изменю свой код, чтобы включить все комбинации удаления в выпадающее событие jquery onchange(). Мой код:

$('#skill1').on('change', function() { 
    var n = $("#skill1 option:selected").text(); 
    var index = $('#skill1').get(0).selectedIndex; 
    $('#skill2 option:eq(' + index + ')').remove(); 
    $('#skill3 option:eq(' + index + ')').remove(); 
}); 

$('#skill2').on('change', function() { 
    var p = $("#skill2 option:selected").text(); 
    var index1 = $('#skill2').get(0).selectedIndex; 
    $('#skill3 option:eq(' + index1 + ')').remove(); 
}); 

$('#skill3').on('change', function() { 
    var r = $("#skill3 option:selected").text(); 
    var index2 = $('#skill3').get(0).selectedIndex; 
}); 

Пожалуйста, помогите, так что код может распространяться, когда выбор какого-либо элемента производится в выпадающем списке изменения отражаются в другом выпадающем списке

Answer 1

Я надеюсь, что этот подход может дайте несколько идей:

1- Добавить класс для каждого выбора, чтобы вы могли получить массив из них.

2- Добавить событие изменения к элементам, содержащим класс: при каждом изменении, итерации по массиву и удалении опции, содержащей выделенный текст. Чтобы предотвратить стирание опций из выбора, вызвавшего событие или предыдущие (как я думаю, это ваше намерение), установите защитник (startRemoving), который предотвращает стирание чего-либо из любого выбора, предшествующего событию, вызвавшему событие.

var $combo = $(".combo"); 
$combo.on("change", function() { 
    var select = this, 
     selected = $("option:selected", this).text(), 
     startRemoving = false; 

    $combo.each(function (_, el) { 
     if (el === select) { 
      startRemoving = true; 
      return; 
     } 

     if (startRemoving) { 
      $("option", el).each(function (_, el) { 
       var $el = $(el); 
       if ($el.text() === selected) { 
        $el.remove(); 
       } 
      }); 
     } 
    }); 
}); 

Это только идея. Вы можете видеть, что работает в этом fiddle

UPDATE

Если вы хотите изменения, чтобы получить отражение всегда, просто удалить охранника и просто убедитесь, что вы не обновляя элемент, который вызвал событие (поведение это немного странно, хотя):

var $combo = $(".combo"); 
$combo.on("change", function() { 
    var select = this, 
     selected = $("option:selected", this).text(); 

    $combo.each(function (_, el) { 
     if (el !== select) { 
      $("option", el).each(function (_, el) { 
       var $el = $(el); 
       if ($el.text() === selected) { 
        $el.remove(); 
       } 
      }); 
     } 
    }); 
}); 

fiddle

Answer 2

не знаю, если это вариант для вас, но вы можете думать об использовании AngularJS здесь, поскольку это, кажется, является ярким примером для него. Там вы можете определить все свои параметры как массив внутри области действия, и как только что-то изменится, все выпадающие списки будут автоматически обновляться.

Посмотрите, что Fiddle

function MyCtrl($scope) { 
    $scope.options = ["option1","option2","option3","option4"] 
} 

Это будет объем пор.