如何在html select中填充和删除选项 [英] how to populate and remove options in html select

问题描述

我有四个下拉菜单和四个选项，所有四个下拉菜单具有相同的选项.如果用户从当前下拉菜单中选择一个选项，我将尝试删除其他三个下拉菜单中的选项.如果用户使用新值再次更改，则应删除新值选项，而旧值应在其他下拉列表中再次填充.我做了些什么，但是没有按预期工作.

I have four dropdowns and four options, all four dropdowns have same options. I am trying to remove options in other three dropdowns if user selects one option from current dropdown. If user changes again with a new value, new value option should remove and old value should populate again in other dropdowns. I did something but it is not working as expected.

请参考以下jsFiddle(已更新): http://jsfiddle.net/ruq1jb0c/5/

Refer to the following jsFiddle(Updated): 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>

推荐答案

好的，这是一个例子，它将使这一过程变得更加简单. 阅读评论以了解其工作原理

Ok, here is an exmaple that will make this much simpler. Read the comment to understand how it work

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>

这篇关于如何在html select中填充和删除选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！