Как показать / скрыть элементы из списка выбора на основе другого выбора

Question

Как в JavaScript показать / скрыть элементы из списка выбора на основе другой выбранной опции, содержащей определенное слово или слова?

Я очень плохо знаком с JavaScript, поэтому любая помощь будет принята.

Существует два раскрывающихся списка: "группа" и "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>

Без идентификаторов, для первого раскрывающегося списка (группы имен), если выбранное значение содержит "(два)", тогда в списке будет отображаться только:

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

Примечание: я не могу добавитьИдентификаторы или атрибуты.Я могу получить доступ только к имени выбора и значению.

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