Question

所以...我已经创建了两个关于音乐主题的下拉菜单。 Dropdown是流派和艺术家。我试图做的是......例如，如果你选择了流派中的说唱艺术家。艺术家将只展示与Rap相关的艺术家。

所以在这里，如果我选择Rap，在下一次下拉我怎么能做到这样用户只能看到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来做。

将“班级名称”提供给“艺术家”下拉列表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>

下拉菜单限制

1 个答案: