如何在第一个菜单的基础上刷新第二个隐藏的下拉菜单?当我从第一个下拉列表中选择一个选项时,会出现第二个下拉列表,从第二个选项中选择后,我得到了文本内容,但当我再次从第一个菜单中选择选项时,以前的文本内容没有隐藏。下一个文本内容显示在第一个文本内容下方。Demohttp://jsfiddle.net/pratyush141/VtFCR/
<select id="circle">
<option value="">select </option>
<option value="Bihar">Bihar </option>
<option value="Assam">Assam</option>
</select>
<select id="assam" style="display:none" >
<option value="">Pick one</option>
<option value="1">Top up</option>
<option value="2">sms</option>
<option value="3">data</option>
</select>
<select id="bihar" style="display:none">
<option value="">Pick one</option>
<option value="1">data</option>
<option value="2">sms</option>
<option value="3">top up</option>
</select>
<div id="brtopup" style="display:none">topup</div>
<div id="brsms" style="display:none">sms</div>
<div id="brdata" style="display:none">data</div>
<div id="astopup" style="display:none">topup</div>
<div id="assms" style="display:none">sms</div>
<div id="asdata" style="display:none">data</div>
$("#circle").change(function() {
var control = $(this);
if (control.val() == "Assam") {
$("#assam").show();
} else {
$("#assam").hide();
}
if (control.val() == "Bihar") {
$("#bihar").show();
} else {
$("#bihar").hide();
}
});
$("#bihar").change(function() {
var control = $(this);
if (control.val() == "1") {
$("#brdata").show();
} else {
$("#brdata").hide();
}
if (control.val() == "2") {
$("#brsms").show();
} else {
$("#brsms").hide();
}
if (control.val() == "3") {
$("#brtopup").show();
} else {
$("#brtopup").hide();
}
});
$("#assam").change(function() {
var control = $(this);
if (control.val() == "1") {
$("#astopup").show();
} else {
$("#astopup").hide();
}
if (control.val() == "2") {
$("#assms").show();
} else {
$("#assms").hide();
}
if (control.val() == "3") {
$("#asdata").show();
} else {
$("#asdata").hide();
}
$('#assam').trigger("chosen:updated");
});
Demohttp://jsfiddle.net/pratyush141/VtFCR/
向assam和bihar的不同组添加一个类:
<div id="brtopup" class ="bihar" style="display:none">topup</div>
<div id="brsms" class ="bihar" style="display:none">sms</div>
<div id="brdata" class ="bihar" style="display:none">data</div>
<div id="astopup" class ="assam" style="display:none">topup</div>
<div id="assms" class ="assam" style="display:none">sms</div>
<div id="asdata" class ="assam" style="display:none">data</div>
然后你可以立即隐藏整个班级组:
if (control.val() == "Assam") {
$("#assam").show();
} else {
$("#assam").hide();
$(".assam").hide();
}
if (control.val() == "Bihar") {
$("#bihar").show();
} else {
$("#bihar").hide();
$(".bihar").hide();
}
});
jsfiddle演示在这里
在JS 中进行这些更改
$("#circle").change(function() {
var control = $(this);
if (control.val() == "Assam") {
$("#assam").show();
} else {
$("#assam").hide();
$("#astopup").hide();//add three lines
$("#assms").hide();
$("#asdata").hide();
}
if (control.val() == "Bihar") {
$("#bihar").show();
} else {
$("#bihar").hide();
$("#brtopup").hide();//add three lines
$("#brsms").hide();
$("#brdata").hide();
}
});
$("#bihar").change(function() {
var control = $(this);
if (control.val() == "1") {
$("#brdata").show();
} else {
$("#brdata").hide();
}
if (control.val() == "2") {
$("#brsms").show();
} else {
$("#brsms").hide();
}
if (control.val() == "3") {
$("#brtopup").show();
} else {
$("#brtopup").hide();
}
});
$("#assam").change(function() {
var control = $(this);
if (control.val() == "1") {
$("#astopup").show();
} else {
$("#astopup").hide();
}
if (control.val() == "2") {
$("#assms").show();
} else {
$("#assms").hide();
}
if (control.val() == "3") {
$("#asdata").show();
} else {
$("#asdata").hide();
}
$('#assam').trigger("chosen:updated");
});