创建多个依赖下拉列表[重复]答案

【问题标题】：create multiple dependent dropdowns [duplicate]创建多个依赖下拉列表[重复]
【发布时间】：2015-08-27 17:22:49
【问题描述】：

  How to i create a multiple dependent dropdown?

例如：-

<select id="one">
<option value="a">animal</option>
<option value="b">bird</option>
</select>
<select id="two_a">
<option value="a1">lion</option>
<option value="a2">tiger</option>
 </select>
<select id="two_b">
<option value="b1">sparrow</option>
<option value="b2">eagle</option>
</select>

如果我在第一个下拉菜单中选择“动物”，则应出现下拉菜单“two_a”，如果我选择“鸟”，则应出现下拉菜单“two_b”

【问题讨论】：

您可以使用 javascript 检查选择了哪个值，并根据所选值显示/隐藏其他下拉菜单。另外，当您提出问题时，请添加指向 jsfiddle 的链接或至少发布您尝试过的内容。
SO 有大量示例，并且可以从 Internet 找到更多示例。做一些搜索。

标签： javascript jquery

【解决方案1】：

我会使用starts with attribute selector 并在one 选择列表上写一个简单的事件。然后您可以使用所选项目的value 来显示相应的子列表。

这是一个正在运行的演示：

$('#one').change(function() {
  $('select[id^="two_"]').hide();
  $('#two_' + this.value).show();
});

select[id^="two_"] { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="one">
  <option value="a">animal</option>
  <option value="b">bird</option>
</select>
<select id="two_a">
  <option value="a1">lion</option>
  <option value="a2">tiger</option>
</select>
<select id="two_b">
  <option value="b1">sparrow</option>
  <option value="b2">eagle</option>
</select>

【讨论】：

【解决方案2】：

您可以将two_a 和two_b 下拉菜单设置为具有display: none 并使用jQuery 来检测下拉菜单one 的变化，并在适当的下拉菜单上使用.hide() 和.show() 来显示/隐藏它们. 请参阅http://codepen.io/anon/pen/LpPLpp 进行演示。

【讨论】：