动态选择元素

Question

我有一个选择元素，里面有多个选项：

<select class="form-control" name="genere1">
   <option value="Alternative / Indie">Alternative / Indie</option>
   <option value="Classical Music">Classical Music</option>
   <option value="Country">Country</option>
   <option value="Easy Listening">Easy Listening</option>
   <option value="Electronic / Dance">Electronic / Dance</option>
   <option value="Hip Hop / Rap">Hip Hop / Rap</option>
   <option value="Jazz">Jazz</option>
   <option value="Latin / Reggaeton">Latin / Reggaeton</option>
   <option value="Other">Other</option>
   <option value="Pop">Pop</option>
   <option value="Reggae / Dancehall">Reggae / Dancehall</option>
   <option value="Rock">Rock</option>
   <option value="Spiritual">Spiritual</option> 
</select>

对于这里看到的每个选项元素，我都有另一个select元素。基本上，我在一个选择元素中列出了一系列音乐流派，在它下面，是与每一个“主流派”相关的子流派。

我想做的是使子体裁只有在相对体裁被选中时才可见。例如，如果用户选择“Pop”，我想向他们显示包含Pop子类型的相关选择字段。

我的HTML标记实际上是由WordPress插件生成的，不幸的是，我无法编辑它。也就是说，我不能在HTML中声明自定义值，因为它们是由插件自动生成的。我实际上在寻找一个简单的解决方案，比如：如果“主流派”是“摇滚”，那么显示“摇滚”输入子流派。我怎么能做这样的事？

Answer 1

您可以使用链接两个选择并显示相应的子类型。数据集。选项。恐怕你在这里不会有一点JavaScript。

以下是您的特定用例的工作示例：

const genre = document.querySelector("#genre");
const subgenre = document.querySelector("#subgenre");
const subOptions = subgenre.querySelectorAll("option");

const setValue = (newValue) => {
  subgenre.innerText = null;
  for (let i = 0; i < subOptions.length; i++)
    subOptions[i].dataset.option === newValue &&
    subgenre.appendChild(subOptions[i]);
};

setValue(genre.value);

<select id="genre" onchange="setValue(this.value)">
  <option value="Metal">Metal</option>
  <option value="Rock">Rock</option>
</select>
<select id="subgenre">
  <option value="Metal" data-option="Metal">Thrash Metal</option>
  <option value="Metal" data-option="Metal">Death Metal</option>
  <option value="Metal" data-option="Metal">Black Metal</option>
  <option value="Rock" data-option="Rock">Classic Rock</option>
  <option value="Rock" data-option="Rock">Hard Rock</option>
</select>