如何在 html 选择中填充和删除选项

Question

我有四个下拉菜单和四个选项，所有四个下拉菜单都有相同的选项。如果用户从当前下拉列表中选择一个选项，我正在尝试删除其他三个下拉列表中的选项。如果用户再次使用新值进行更改，则应删除新值选项，并且应在其他下拉列表中再次填充旧值。我做了一些事情，但没有按预期工作。

参考以下jsFiddle（更新）：http://jsfiddle.net/ruq1jb0c/5/

$('.inputcontrol').change(function() {
  var fields = ['Employee', 'Status', 'State', 'Supervisor'];
  var value = $(this).val();
  $('.inputcontrol').not(this).find('option').each(function() {
    if ($(this).val() == value) {
      $(this).remove()
    }
  });

  $('.inputcontrol').each(function() {

    for (var i = 0; i < fields.length; i++) {
      if (fields[i] != value) {
        if ($(this).find("option[value=" + fields[i] + "]").length == 0) {
          $(this).append("<option value=" + fields[i] + ">" + fields[i] + "</option>");

        }
      }

    }

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="field1" class="inputcontrol">
  <option value="Employee">Employee</option>
  <option value="Status">Status</option>
  <option value="State">State</option>
  <option value="Supervisor">Supervisor</option>
</select>
<br><br>
<select id="field2" class="inputcontrol">
  <option value="Employee">Employee</option>
  <option value="Status">Status</option>
  <option value="State">State</option>
  <option value="Supervisor">Supervisor</option>
</select>
<br><br>
<select id="field3" class="inputcontrol">
  <option value="Employee">Employee</option>
  <option value="Status">Status</option>
  <option value="State">State</option>
  <option value="Supervisor">Supervisor</option>
</select>
<br><br>
<select id="field4" class="inputcontrol">
  <option value="Employee">Employee</option>
  <option value="Status">Status</option>
  <option value="State">State</option>
  <option value="Supervisor">Supervisor</option>
</select>

Answer 1

好的，这里有一个例子可以让这更简单。 阅读评论以了解其工作原理

var selectedFields = ['Employee', '', '', ''] // here is all selected Value for each dropdownList is saved
var drps = $(".inputcontrol");
function validate(){
drps.each(function(index, item){
      $(this).attr("index", index); // This is important where $(this).index() are not working 
     $(this).find("option").show(); // reset all option to visible
     var v = $(this).val();
     $.each(selectedFields, function(subIndex, subItem){
        if (index > subIndex) // here we hide all previews selected values 
            $(item).find("option[value='"+subItem+"']").hide();
     });
  });
}

drps.change(function(){
  var itemIndex = eval($(this).attr("index")); 
  selectedFields[itemIndex] = $(this).val()
  drps.each(function(index, item){ // reset all values of dropdown that are after the current dropdown
    if (index > itemIndex) {
        $(this).val("none")
        selectedFields[index] ="";
     }
  });
  validate();
});

validate();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="field1" class="inputcontrol">
  <option value="Employee">Employee</option>
  <option value="Status">Status</option>
  <option value="State">State</option>
  <option value="Supervisor">Supervisor</option>
</select>
<br><br>
<select id="field2" class="inputcontrol">
  <option selected="selected" value="none">none</option>
  <option value="Employee">Employee</option>
  <option value="Status">Status</option>
  <option value="State">State</option>
  <option value="Supervisor">Supervisor</option>
</select>
<br><br>
<select id="field3" class="inputcontrol">
  <option selected="selected" value="none">none</option>
  <option value="Employee">Employee</option>
  <option value="Status">Status</option>
  <option value="State">State</option>
  <option value="Supervisor">Supervisor</option>
</select>
<br><br>
<select id="field4" class="inputcontrol">
 <option selected="selected" value="none">none</option>
  <option value="Employee">Employee</option>
  <option value="Status">Status</option>
  <option value="State">State</option>
  <option value="Supervisor">Supervisor</option>
</select>

Answer 2

尝试使用类和addClass & removeClass

在更改时找到具有hide 类的选项并添加或删除它

$('.inputcontrol').change(function(e) {
  $('.inputcontrol').find('option.hide').removeClass('hide');
  $('.inputcontrol').not(this).find('option[value="' + e.target.value + '"]').addClass('hide');
});

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="field1" class="inputcontrol">
  <option value="Employee">Employee</option>
  <option value="Status">Status</option>
  <option value="State">State</option>
  <option value="Supervisor">Supervisor</option>
</select>
<br><br>
<select id="field2" class="inputcontrol">
  <option value="Employee">Employee</option>
  <option value="Status">Status</option>
  <option value="State">State</option>
  <option value="Supervisor">Supervisor</option>
</select>
<br><br>
<select id="field3" class="inputcontrol">
  <option value="Employee">Employee</option>
  <option value="Status">Status</option>
  <option value="State">State</option>
  <option value="Supervisor">Supervisor</option>
</select>
<select id="field4" class="inputcontrol">
  <option value="Employee">Employee</option>
  <option value="Status">Status</option>
  <option value="State">State</option>
  <option value="Supervisor">Supervisor</option>
</select>

Answer 3

校验码cmets

$('select').change(function() {
  
  // get id to exclude from hiding
  var id = $(this).attr('id');
  
  // get value select for option hiding reference
  var val = $(this).val();
  
  // unhide all options
  $('select option').css('display', 'block');
  
  // loop through all select except the changed one
  // and hide all options with value from changed select
  $('select:not(#' + id + ')').each(function() {
    $(this).find('option[value="' + val + '"]').css('display', 'none');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="field1" class="inputcontrol">
  <option value="Employee">Employee</option>
  <option value="Status">Status</option>
  <option value="State">State</option>
  <option value="Supervisor">Supervisor</option>
</select>
<br><br>
<select id="field2" class="inputcontrol">
  <option value="Employee">Employee</option>
  <option value="Status">Status</option>
  <option value="State">State</option>
  <option value="Supervisor">Supervisor</option>
</select>
<br><br>
<select id="field3" class="inputcontrol">
  <option value="Employee">Employee</option>
  <option value="Status">Status</option>
  <option value="State">State</option>
  <option value="Supervisor">Supervisor</option>
</select>
<br><br>
<select id="field4" class="inputcontrol">
  <option value="Employee">Employee</option>
  <option value="Status">Status</option>
  <option value="State">State</option>
  <option value="Supervisor">Supervisor</option>
</select>

Answer 4

这有所作为：（如在您的 jsfiddle 链接中）

if($(this).val()===value)
        $(this).hide()
 else  $(this).show() // this will unhide previously hidden options 

而不是'=='

见jsFiddle