如何创建基于来自另一个下拉菜单的答案出现的下拉菜单

Question

我正在尝试创建一个页面，您的用户必须进行基于对方的多个选择。如何创建一个表单，以便根据用户在下拉菜单＃1中的选择显示特定类型的下拉菜单＃2。

例如，可以说用户必须选择“产品类别”和“产品子类别”。如果用户从第一个下拉菜单中选择“床上用品”，则会自动出现第二个下拉菜单，其中有诸如“床，床垫，枕头”等选项。

为了进一步说明这个例子，可以说用户选择“电子”而不是“床上用品”。然后第二个下拉菜单将有“电视，MP3播放器，电脑”等选择。

怎么会这样做呢？这是你会用HTML/CSS或其他形式做的事吗？

感谢您的帮助！

编辑 - 我使用Django/Python构建这个网站以及HTML，CSS和Javascript。

Answer 1

您可以使用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> 

Answer 2

喜欢这个？创建了一个js小提琴。 http://jsfiddle.net/wigster/MeTQQ/

它抓取下拉框的值，然后如果它符合规则，它会设置另一个下拉框显示，如果没有，则保持其他下拉框隐藏。

Answer 3

如果你想使用jQuery，您可以使用此测试案例： http://jsfiddle.net/exXmJ/

我看到它的方式有两种方式去。删除下拉菜单并将其交换为新的下拉菜单，或者隐藏/显示两个不同的下拉菜单。亚历山大覆盖了第二种方法，所以我不会进入。