javascript - 限制用户在 3 个下拉列表中选择相同的选项

Question

我有 3 个选择，我想限制用户选择相同的选项。如果用户选择第一个选项，即“选择”，那么其他下拉菜单应该显示所有值。限制有效，但是当我选择第一个选项，即选择时，它不会用所有值填充其余的选择

https://next.plnkr.co/edit/lM7yB3gLhMCWyI5z

<select id="sel1" class='agency'>
      <option value="Select">Select</option>
      <option value="EIS">EIS</option>
      <option value="Exp">Exp</option>
      <option value="TUL">TUL</option>
  </select>
   <select id="sel2" class='agency'>
      <option value="Select">Select</option>
      <option value="EIS">EIS</option>
      <option value="Exp">Exp</option>
      <option value="TUL">TUL</option>
  </select>
  <select id="sel3" class='agency'>
      <option value="Select">Select</option>
      <option value="EIS">EIS</option>
      <option value="Exp">Exp</option>
      <option value="TUL">TUL</option>
  </select>


$(function () {


        var elements = [];
        $('.agency').each(function (i, obj) {
            elements.push($(this).attr('id'));
        });

        var arr = ['EIS', 'EXP', 'TUL'];
        $('.agency').change(function () {

            debugger;
            var id = $(this).attr('id');
            var selected = $("#" + id + "  option:selected").text();;
            var filteredElements = $(elements).filter(function (idx) {
                return elements[idx] !== id;
            });

            var y = $.grep(arr, function (value) {
                return value.trim() != selected.trim();
            });

            for (var i = 0; i < filteredElements.length; i++) {

                var $selectobject = $("#" + filteredElements[i]);
                var currentID = $selectobject.attr('id');

                var selctedText = $("#" + currentID + "  option:selected").text();;
                var currentArr=[];

                $("#" + currentID + "  option").each  ( function() {
                    currentArr.push ( $(this).text() );
                });
                $("#" + currentID).html('');
               $("#" + currentID).prepend('<option value=' + 0 + '>  Select </option>');
                $.each(y, function (index, value) {
                    $("#" + currentID).append('<option value=' + value + '>' + value + ' </option>');
                });

                $("#" + currentID).prepend("<option value='0' 'selected'></option>");

                var x = y.filter(function (elem) {
                    return elem.trim() !== selctedText.trim();
                });
                y = x;
                debugger;

            }
        });






    });

我编辑了代码以显示我所做的工作

标签： javascriptjquery