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

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

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

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

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

感谢您的帮助！

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

来源

2012-08-02 goelv

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

来源

2012-08-02 23:35:44 amiregelz

完美！感谢您的帮助 – goelv 2012-08-02 23:36:49

您会如何使用外部CSS编写上述内容？我知道如何在HTML中做到这一点，但在JS代码中，它是否如所示的那样离开它，还是它也称为样式表？ – wordman 2013-10-24 22:40:17

@wordman我不确定你的意思，你能链接你的代码吗？ – amiregelz 2013-10-25 12:46:01

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

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

来源

2012-08-02 23:36:14

不是一个不好的起点+1，但他可能可以使用更多的解释。 – AlexMA 2012-08-02 23:46:34

为输入而欢呼 - 添加简要说明 - 提高。 – 2012-08-02 23:49:00

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

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

来源

2012-08-02 23:42:28 thomasmyrman

注意：我不会完全按照亚历山大的例子来使用，主要是因为它使用内联css。您应该将CSS放入样式表中，以便从标记中分离出设计。实际的方法没问题，虽然事件监听器可能比onclick =“”属性更好。 – thomasmyrman 2012-08-03 00:00:42

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

回答

相关问题