javascript - 如何刷新 html 中的选择列表

Question

我有一个下拉列表，根据所选值，下一个下拉列表显示特定值。当更改第一个列表的值然后返回到旧值时，第二个列表不会更新。保持之前选择的相同值。每当我更改第一个列表的值时，如何使第二个列表更新为我标记为默认选择的值？

希望你们能够理解我，感谢你们抽出时间。

代码如下:

    <select onchange="showprd('hidevalue', this), showprd2('hidevalue2', this)">
<option value="" disabled selected hidden>Selecione</option>
<option value="0">São Francisco</option>
<option value="1">Bradesco</option>
</select>
<br>
<br>
<select hidden id="hidevalue">
    <option value="" disabled selected hidden>Selecione o produto</option>
    <option value="pleno">Pleno</option>
    <option value="integrado">Integrado</option>
    </select>
    <select hidden id="hidevalue2">
        <option value="" disabled selected hidden>Selecione o produto</option>
        <option value="junior">Junior</option>
        <option value="senior">Senior</option>
        </select>
</body>
<script>
   function showprd(id, elementValue) {
      document.getElementById(id).style.display = elementValue.value == 0 ? 'block' : 'none';
   }
   function showprd2(id, elementValue) {
      document.getElementById(id).style.display = elementValue.value == 1 ? 'block' : 'none';
   }
</script>

Answer 1

TL；博士。在一处控制输入值的变化。

请参阅下面更新的代码片段。 html 结构尚未更改，但我删除了内联 js 调用并更新了 id 名称。 JavaScript block 有详细注释。

简而言之，此代码监听对父select 下拉列表的任何更改。每当发生更改时，其子下拉列表将重置其值并相应地切换其可见性。

// Assign each dom element to a variable
const primarySelect = document.querySelector('#primary');
const childSelect1 = document.querySelector('#child1');
const childSelect2 = document.querySelector('#child2');
const defaultValues = document.querySelectorAll('.default');

function resetInputs() {
  // Reset the child select options to default
  defaultValues.forEach(option => option.selected = true);
}
function handlePrimary(e) {
  // Reset the child select values whenever the parent value changes
  resetInputs();
  // `input` value is always a string. Here we're converting it to a number
  const val = parseFloat(e.target.value);
  // Toggle visibility of child select dropdowns
  [childSelect1, childSelect2].
    forEach((select, i) => select.style.display = val === i ? 'block' : 'none');
}

primarySelect.addEventListener('change', handlePrimary);

<select id="primary">
  <option value="" disabled selected hidden>Selecione</option>
  <option value="0">São Francisco</option>
  <option value="1">Bradesco</option>
</select>
<br>
<br>
<select hidden id="child1">
  <option class="default" value="" disabled selected hidden>Selecione o produto</option>
  <option value="pleno">Pleno</option>
  <option value="integrado">Integrado</option>
</select>
<select hidden id="child2">
  <option class="default" value="" disabled selected hidden>Selecione o produto</option>
  <option value="junior">Junior</option>
  <option value="senior">Senior</option>
</select>