我有两个字段“ Controller 类型”和“测试类型”。我想要的是,当 Controller 是“EBOD”时,下拉列表中应该出现的测试是(“BFT”、“CTO”、“JBOD Generic”)。我尝试使用 javascript 来做到这一点,但无法得到有效的解决方案。任何人都可以帮助实现这一目标吗? 任何帮助深表感谢。 谢谢
<fieldset>
<label for='Controller Type'><strong>Controller Type </strong></label>
<select name='controller' id="Controller" onchange="showsecondlist()" required>
<option value=""> - Select the Controller - </option>
<option data-extra=true value='RAID'>RAID
<option data-extra=true value='EBOD'>EBOD
<option data-extra=true value='AP'>AP
</select>
</fieldset>
<fieldset>
<label for='Test Type'><strong>Test Type</strong></label>
<select name='test' id="Test" required >
<option value=""> - Select The Test - </option>
<option data-extra=true value='BFT'>BFT
<option data-extra=true value='CTO'>CTO
<option data-extra=true value='RAID Generic'>RAID Generic
<option data-extra=true value='Port Check' >Port Check
<option data-extra=true value='FW Generic' >FW Generic
<option data-extra=true value='EBOD Generic' >JBOD Generic
</select>
</fieldset>
我尝试过类似的方法,但没有成功。
function showsecondlist()
{
var uservalue= document.getElementById("Controller").value;
if(uservalue=='EBOD')
document.getElementById("Test").value.innerHTML='<option value="1.1">BFT</option><option value="1.2">CTO</option><option value="1.2">JBOD Generic</option>';
}
最佳答案
我会使用某物。像下面这样:
// mapping from values of first select to the ones
// to be shown in second when that value is selected
const mappings = {
a: ['d','e'],
b: ['e','f'],
c: ['d','g']
};
const first = document.getElementById('first');
const second = document.getElementById('second');
// when first select changes, show all options of the second,
// if no mapping exists, otherwise show mapped and hide the others
first.onchange = ({ target: { value: selected }}) => {
[...second.options].forEach((o) => {
if (!mappings[selected] || mappings[selected].includes(o.value)) {
o.style.display = '';
} else {
o.style.display = 'none';
}
});
};
<label>
First select:
<select id="first">
<option>...</option>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>
</label>
<label>
Second select:
<select id="second">
<option>d</option>
<option>e</option>
<option>f</option>
<option>g</option>
</select>
</label>
关于javascript - 有没有一种方法可以使用纯 JavaScript 根据另一个下拉列表过滤一个下拉列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60306724/