javascript - 有没有一种方法可以使用纯 JavaScript 根据另一个下拉列表过滤一个下拉列表？

Question

我有两个字段“ 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>';
}

Answer 1

我会使用某物。像下面这样:

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