[英]Cascading DropDown Remove Previous Selected
I am trying to have 7 dropdown boxes in html. 我想在html中有7个下拉框。 They will all get populated the same data. 他们都会填充相同的数据。 What I am trying to do is when the first dropdown is selected it would remove the selected item from the next dropdown. 我想要做的是当第一个下拉列表被选中时,它将从下一个下拉列表中删除所选项目。 So, if you Have Numbers: A,B,C,D,E,F,G,H,I in one dropdown if I select B in the first drop down then in the next dropdown it should only show A,C,D,E,F,G,H,I and so on up to 7 dropdowns. 所以,如果你有数字:A,B,C,D,E,F,G,H,我在一个下拉列表中,如果我在第一个下拉列表中选择B,那么在下一个下拉列表中它应该只显示A,C,D ,E,F,G,H,I等等最多7个下拉菜单。 I dont know what would be the best way to approach this in JavaScript or JQuery. 我不知道在JavaScript或JQuery中处理这个问题的最佳方法是什么。 Thanks for your help in advance. 感谢您的帮助。
<table>
Selected Options: <div id="123"></div>
<tr>
<td class="assessmentHeader" align="left"><U> Diagnosis: - </U><br/> <!---Added code 88898 Created 7 dropdowns for Diagnosis 05/04/2012--->
<!---<font style="visibility:hidden"><textarea name="diagnosis" rows="2" cols="5" disabled="disabled">NULL</textarea></font><br/>--->
Primary : <select name="Primary" onchange="selected(this)">
<option value=""></option>
<cfloop query="DCheck">
<option value="#DCheck.cDescription#" >#DCheck.cDescription#</option></cfloop>
</select> <br/> <br/>
Secondary: <select name="Secondary" onchange="selected(this)">
<option value=""></option>
<cfloop query="DCheck">
<option value="#DCheck.cDescription#">#DCheck.cDescription#</option> </cfloop>
</select> <br><br />
Third : <select name="Third" onchange="selected(this)">
<option value=""></option>
<cfloop query="DCheck">
<option value="#DCheck.cDescription#">#DCheck.cDescription#</option></cfloop>
</select> <br><br/>
Fourth : <select name="Fourth" onchange="selected(this)">
<option value=""></option>
<cfloop query="DCheck">
<option value="#DCheck.cDescription#">#DCheck.cDescription#</option></cfloop>
</select> <br><br/>
Fifth : <select name="Fifth" onchange="selected(this)">
<option value=""></option>
<cfloop query="DCheck">
<option value="#DCheck.cDescription#">#DCheck.cDescription#</option></cfloop>
</select> <br><br/>
Sixth : <select name="Sixth" onchange="selected(this)">
<option value=""></option>
<cfloop query="DCheck">
<option value="#DCheck.cDescription#">#DCheck.cDescription#</option></cfloop>
</select> <br><br/>
Seventh : <select name="Seventh" onchange="selected(this)">
<option value=""></option>
<cfloop query="DCheck">
<option value="#DCheck.cDescription#">#DCheck.cDescription#</option></cfloop>
</select> <br><br />
</td>
</tr>
</table>
http://jsfiddle.net/iambriansreed/AyxSE/ http://jsfiddle.net/iambriansreed/AyxSE/
This works for infinite select
tags. 这适用于无限select
标签。
jQuery jQuery的
$('#select-group select').change(function(){
var values = [];
$('#select-group select').each(function(){
if(this.value.length > 0)
values.push(this.value);
});
$('#select-group select optgroup').each(function(){
$(this).after('<option>'+ $(this).attr('label')+'</option>').remove();
});
$('#select-group select option').each(function(){
if($.inArray(this.value, values) > -1 &&
!this.selected)
$(this).after('<optgroup label="'+this.value+'"></optgroup>').remove();
});
});
HTML HTML
<div id="select-group">
<select>
<option value="">Select a ...</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
</select>
<select>
<option value="">Select a ...</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
</select>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.