下拉菜单限制

Question

所以...我创建了两个关于音乐主题的下拉菜单。下拉列表是流派和艺术家。我想做的是.. 例如，如果您在流派中选择说唱.. 艺术家将只显示与说唱相关的艺术家。

所以在这里，如果我选择说唱，在下一个下拉菜单中，我如何才能让用户只能看到 Iggy Azalea 而看不到与其他流派相关的任何其他艺术家（但他们会被隐藏）？

      <select name="Genre"></option>
      <option value="Default">[choose genre]</option>
      <option value="Rap">Rap</option>
      </select>

      <select name="Artist"></option>
      <option value="Default">[choose artist]</option>
      <option value="IggyAzalea">Iggy Azalea</option>
      <option value="ArianaGrand">Ariana Grande</option>
      </select>

Answer 1

您可以像这样使用 jquery 来完成。

将 Class 名称提供给 'Artist' 下拉菜单 option 标签 = 父流派名称（艺术家所属）。并在流派更改时隐藏和显示这些选项。检查以下示例以进行说明。

HTML

<select name="Genre" id="Genre"></option>
<option value="Default">[choose genre]</option>
<option value="Rap">Rap</option>
<option value="Example">Example</option>
<option value="OtherExample">OtherExample</option>
</select>

<select name="Artist" id="Artist"></option>
<option value="Default">[choose artist]</option>
<option class="Rap artist" value="IggyAzalea">Iggy Azalea</option>
<option class="Rap artist" value="RapOne">RapOne</option>
<option class="Example artist" value="Example Option 1">Example Option 1</option>
<option class="Example artist" value="Example Option 2">Example Option 2</option>
<option class="OtherExample artist" value="OtherExample Option 1">OtherExample Option 1</option>
<option class="OtherExample artist" value="OtherExample Option 2">OtherExample Option 2</option>
<option class="artist" value="ArianaGrand">Ariana Grande</option>
</select>

JQUERY

<script>
    $('#Genre').on('change', function() {       
        $('.artist').hide();
        $('.'+$(this).val()).show();
    });        
</script>

下拉菜单限制

Drop Down menu restriction

drop-down-menu