我有两级下拉(select box)
。
如果我在拳头水平上选择某个东西,那么将根据拳头选择显示第二个下拉设置
例如:我在第一级有6个选择,对于每个选择,我有另外6个下拉设置隐藏在页面上。作为用户选择,它将显示第二级下拉。
这是第一级
<select name="TapeType" id="TapeType">
<option value="s"><Select></option>
<option value="Polypropylene Tape" id="PT">POLYPROPYLENE TAPE</option>
<option value="HD Polypropylene Tape">HD POLYPROPYLENE TAPE</option>
<option value="X HD Polypropylene Tape">X HD POLYPROPYLENE TAPE</option>
<option value="PVC Tape">PVC TAPE</option>
<option value="HD PVC TAPE">HD PVC TAPE</option>
<option value="Reinforced Paper Tape">REINFORCED PAPER TAPE</option>
<option value="Flatback Tape">FLATBACK TAPE</option>
</select>
这是第二级的两个例子
01
<select name="TapeColorPT" id="TapeColorPT" class="toggledDropDown">
<option value="Tan">Tan</option>
<option value="White">White</option>
<option value="Clear">Clear</option>
<option value="Red">Red</option>
<option value="Orange">Orange</option>
<option value="Yellow">Yellow</option>
</select>
02
<select name="TapeColorHPT" id="TapeColorHPT" class="toggledDropDown">
<option value="Tan">Tan</option>
<option value="White">White</option>
<option value="Clear">Clear</option>
</select>
为了显示每个下拉列表我使用此方法与js
$('.toggledDropDown').hide();
$('#TapeType').change(function () {
if ($('#TapeType option:selected').text() == "POLYPROPYLENE TAPE"){
$('#TapeColorPT').show();
}
else {
$('#TapeColorPT').hide();
if ($('#TapeType option:selected').val() == "HD Polypropylene Tape"){
$('#TapeColorHPT').show();
}
else {
$('#TapeColorHPT').hide();
}
}});
我的问题是
示例:当我选择1个第一级时,我在第二级选择3。然后我回到第一级并选择2,所以出现另一组二级下拉。之后当我回到第一级选择1时,我之前选择的第二级3将在那里。当我再次回到它时,我希望它不会被选中。
所以我认为如果有人告诉我如何使用javascript(js)
刷新选择框而不刷新整页,我可以这样做。
答案 0 :(得分:2)
你可以尝试修改你的js函数:
$('#TapeType').change(function () {
//you will hide the second and third level
$('.toggledDropDown').hide();
//here i reset the second and third level to defaults by selecting the top one
$('#TapeColorPT,#TapeColorHPT').attr('value','Tan');
//here get the value od the first dropdown
var tapeTypeVal = $('#TapeType').val();
//here i switch for the 6 option of the first dropdown to know which dropdown will
//be appear
switch (tapeTypeVal) {
case 'POLYPROPYLENE TAPE':
$('#TapeColorPT').show();
break;
case 'HD Polypropylene Tape':
$('#TapeColorHPT').show();
break;
}
});
答案 1 :(得分:0)
尝试将您的顶行代码放在onchange事件处理程序的主体中:
$('.toggledDropDown').hide(); /* existing top line of code can remain here */
$('#TapeType').change(function () {
$('.toggledDropDown').hide(); /* but also add it right here */
if ($('#TapeType option:selected').text() == "POLYPROPYLENE TAPE"){
$('#TapeColorPT').show();
}
...
完整代码
$('.toggledDropDown').hide();
$('#TapeType').change(function () {
$('.toggledDropDown').hide(); /* adding this line here is the only change */
if ($('#TapeType option:selected').text() == "POLYPROPYLENE TAPE"){
$('#TapeColorPT').show();
}
else {
$('#TapeColorPT').hide();
if ($('#TapeType option:selected').val() == "HD Polypropylene Tape"){
$('#TapeColorHPT').show();
}
else {
$('#TapeColorHPT').hide();
}
}});