如何根据另一个选择显示/隐藏选择列表中的项目答案

【问题标题】：How to show/hide items from a select list based on another selection如何根据另一个选择显示/隐藏选择列表中的项目
【发布时间】：2019-01-29 21:05:22
【问题描述】：

在 JavaScript 中，如何根据包含某个或多个特定单词的另一个选定选项显示/隐藏选择列表中的项目？

我对 JavaScript 非常陌生，因此我们将不胜感激。

有两个下拉菜单：“group”和“alph”。

<select name="group">
    <option value="Angry (Two)">Angry (Two)</option>
    <option value="Happy (Two)">Happy (Two)</option>
    <option value="Sad">Sad</option>
    <option value="Tired (One)">Tired (One)</option>
</select>

<select name="alph">
    <option value="ABC">ABC</option>
    <option value="ABC-1">ABC-1</option>
    <option value="ABC-2">ABC-2</option>
    <option value="DEF">DEF</option>
    <option value="DEF-1">DEF-1</option>
    <option value="DEF-2">DEF-2</option>
    <option value="DEF-3">DEF-3</option>
</select>

如果没有ID，对于第一个下拉列表（名称组），如果选择的值包含“（二）”，那么列表将只显示：

<select name="alph">
    <option value="ABC-2">ABC-2</option>
    <option value="DEF-2">DEF-2</option>
</select>

如果用户更改选择，并且选择的值包含“（一）”，那么列表将只显示：

<select name="alph">
    <option value="ABC-1">ABC-1</option>
    <option value="DEF-1">DEF-1</option>
</select>

如果用户更改了选择，并且选择的值既不包含“（一）”也不包含“（二）”，则列表将显示：

<select name="alph">
    <option value="ABC">ABC</option>
    <option value="DEF">DEF</option>
    <option value="DEF-3">DEF-3</option>
</select>

注意：我无法添加 ID 或属性。我只能访问选择的名称和值。

【问题讨论】：

在两个选择上添加data-* 值，例如data-group="1"、data-group="2" 等，然后隐藏与当前选定组不匹配的值。
选择组的问题。如果有 20 多个选项，而不是为每个选项使用 data-*，有没有办法检查它是否在值中包含 " (One)" 那么它将显示 ABC-1 和 DEF-1？如果包含"（二）"，则显示ABC-2和DEF-2等

标签： javascript select dropdown

【解决方案1】：

使用data-* 创建组，然后使用 querySelector 获取所有选项并测试它们是否在组中。如果他们在组中，则显示他们，否则隐藏他们。

// The main group
let groups = document.querySelector('select[name=group]')

// Add a change event
groups.addEventListener('change', (e) => {
  // Get the currently selected Group
  let current = e.target.options[e.target.selectedIndex]
  // Get the data-group number
  let group = current.getAttribute('data-group')
  // Get all the items from the second dropdown
  let opts = Array.from(document.querySelectorAll('select[name=alph]>option'))
  // Hide items that are not appart of the group
  opts.forEach(itm => itm.style.display = itm.getAttribute('data-group') == group || !itm.getAttribute('data-group') ? 'initial' : 'none')
  // Reset the the selection
  document.querySelector('select[name=alph]').selectedIndex = 0
})

/* Hide option two items by default */
select[name=alph]>option[data-group]{display:none;}

<select name="group">
    <option>Select One...</option>
    <option data-group="1" value="Angry (Two)">Angry (Two)</option>
    <option data-group="2" value="Happy (Two)">Happy (Two)</option>
    <option data-group="3" value="Sad">Sad</option>
    <option data-group="4" value="Tired (One)">Tired (One)</option>
</select>

<select name="alph">
    <option>Select One...</option>
    <option data-group="1" value="ABC">ABC</option>
    <option data-group="1" value="ABC-1">ABC-1</option>
    <option data-group="2" value="ABC-2">ABC-2</option>
    <option data-group="2" value="DEF">DEF</option>
    <option data-group="3" value="DEF-1">DEF-1</option>
    <option data-group="3" value="DEF-2">DEF-2</option>
    <option data-group="4" value="DEF-3">DEF-3</option>
</select>

【讨论】：