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

  显示原文与译文双语对照的内容
95 0

我有四个下拉框和四个选项,所有四个下拉框都有相同的选项。如果用户从当前下拉菜单中选择一个选项,我将尝试删除其他三个下拉菜单中的选项。如果用户再次使用新值进行更改,则新值选项应该删除,旧值应该再次填充。我做了一些事情,但它不能像预期那样工作。

请参考以下 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>
时间:原作者:0个回答

68 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>
原作者:
112 3

检查代码注释

$('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>
原作者:
115 4

这造成了不同:( 就像在jsfiddle链接中一样)

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

而不是 =="'

jsFiddle 看到它。

原作者:
114 1

好的,这是一个 exmaple,它能让你更简单。阅读注释以了解它的工作方式

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")
 });
 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>
原作者:
...