我正在尝试创建一个页面,用户必须在此页面上进行多项基于彼此的选择。如何创建一个表单,以便根据用户在下拉菜单#1中的选择显示特定类型的下拉菜单#2。
例如,假设用户必须选择“产品类别”和“产品子类别”。如果用户从第一个下拉菜单中选择“床上用品”,则会自动显示第二个下拉菜单,其中包含“床,床垫,枕头”等选项。
为了进一步说明这个例子,假设用户选择“电子产品”而不是“床上用品”。然后第二个下拉菜单会有“电视,MP3播放器,电脑”等选项。
如何做这样的事情?你会用HTML / CSS或其他形式做些什么吗?
感谢您的帮助!
编辑 - 我正在使用Django / Python来构建这个网站以及HTML,CSS和Javascript。
答案 0 :(得分:6)
您可以结合使用HTML和JavaScript (JSFIDDLE):
<select id="opts" onchange="showForm()">
<option value="0">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<div id="f1" style="display:none">
<form name="form1">
<select id="opts" onchange="showForm()">
<option value="0">Select Option</option>
<option value="1">Option 1A</option>
<option value="2">Option 1B</option>
</select>
</form>
</div>
<div id="f2" style="display:none">
<form name="form2">
<select id="opts" onchange="showForm()">
<option value="0">Select Option</option>
<option value="1">Option 2A</option>
<option value="2">Option 2B</option>
</select>
</form>
</div>
<script type="text/javascript">
function showForm() {
var selopt = document.getElementById("opts").value;
if (selopt == 1) {
document.getElementById("f1").style.display = "block";
document.getElementById("f2").style.display = "none";
}
if (selopt == 2) {
document.getElementById("f2").style.display = "block";
document.getElementById("f1").style.display = "none";
}
if (selopt == 0) {
document.getElementById("f2").style.display = "none";
document.getElementById("f1").style.display = "none";
}
}
</script>
答案 1 :(得分:3)
喜欢这个?创造了一个小提琴手。 http://jsfiddle.net/wigster/MeTQQ/
它抓取下拉框的值,然后如果它与规则匹配,它会设置另一个下拉框以显示,如果没有,则保持隐藏另一个下拉框。
答案 2 :(得分:1)
如果您想使用jQuery,可以使用此测试用例: http://jsfiddle.net/exXmJ/
我看到的方式有两种方法。删除下拉列表并将其换成新的下拉列表,或隐藏/显示两个不同的下拉列表。亚历山大覆盖了第二种方法,所以我不会进入第二种方法。