在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>
没有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或属性。我只能访问选择的名称和值。
答案 0 :(得分:0)
使用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>