我正在尝试创建一个页面，您的用户必须在其中做出基于彼此的多项选择。如何创建一个表单，以便根据用户在下拉菜单 #1 中的选择显示特定类型的下拉菜单 #2。
例如，假设用户必须选择“产品类别”和“产品子类别”。如果用户从第一个下拉菜单中选择“床上用品”，则会自动出现第二个下拉菜单，其中包含“床、床垫、枕头”等选项。
为了进一步说明这个例子，假设用户选择了“电子产品”而不是“床上用品”。然后第二个下拉菜单会有“电视、mp3 播放器、电脑”之类的选项。
如何去做这样的事情？你会用 HTML/CSS 或其他形式做些什么吗？
感谢您的帮助！
编辑 - 我正在使用 Django / Python 以及 HTML、CSS 和 Javascript 来构建这个网站。
【问题讨论】：
标签： javascript python html css
您可以结合使用 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>
【讨论】：
document.getElementById("f1").style.display = "block"; 可以做不同的事情吗？看起来是硬编码的，可以调用样式表中的另一个元素吗？
像这样？创建了一个 js 小提琴。 http://jsfiddle.net/wigster/MeTQQ/
它抓取下拉框的值，然后如果它符合规则，它将设置另一个下拉框显示，如果不，则隐藏另一个下拉框。
【讨论】：
如果你想使用 jQuery，你可以使用这个测试用例： http://jsfiddle.net/exXmJ/
在我看来，有两条路可以走。删除下拉菜单并将其换成新的，或隐藏/显示两个不同的下拉菜单。 Alexander 介绍了第二种方法，所以我不再赘述。
【讨论】：