Question

  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>

如果我在第一个下拉列表中选择“animal”，则会出现下拉列表“two_a”，如果我选择“bird”，则会出现下拉列表“two_b”

Answer 1

您可以将two_b和display: none下拉列表设置为one，并使用jQuery检测下拉列表中的更改.hide()并使用.show()和{{ 1}}在适当的下拉列表中显示/隐藏它们。有关演示，请参阅http://codepen.io/anon/pen/LpPLpp。

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

创建多个依赖的下拉列表

2 个答案: