由于使用Javascript进行另一个选择，如何更改选择的选项？

Question

如果选中复选框或由于其他选择，我想在HTML中动态更改选择的选项。

这些是我的选择：

<!-- choosing -->
<select name="choose" id="choose">
  <option value="">-- choose --</option>
  <option value="o1">Option1</option>
  <option value="o2">Option2</option>
</select>

<!-- if choose == o1 -->
<select name="subject1" id="subject1">
  <option value="">-- choose --</option>
  <option value="Religion">Religion</option>
  <option value="Spansich">Spanisch</option>
  <option value="Französisch">Französisch</option>
  <option value="Englisch">Englisch</option>
  <option value="Latein">Latein</option>
</select>

<!-- if choose == o2 -->
<select name="subject2" id="subject2">
  <option value="">-- choose --</option>
  <option value="Geschichte">Geschichte</option>
  <option value="GMK">GMK</option>
  <option value="WBS">WBS</option>
  <option value="Kunst">Kunst</option>
</select>

我想您会为此使用JavaScript，但是我对所有这些真的很陌生，因此，您能告诉我可以使用哪种函数来解决此问题。

Answer 1

<select name="choose" id="choose">
  <option value="">-- choose --</option>
  <option value="o1">Option1</option>
  <option value="o2">Option2</option>
</select>

<select name="subject" id="subject"></select>

<script>
    const option = document.getElementById("choose")

    option.addEventListener("change", (evt) => {

        let options1 =  `<option value="">-- choose --</option>
                          <option value="Religion">Religion</option>
                          <option value="Spansich">Spanisch</option>
                          <option value="Französisch">Französisch</option>
                          <option value="Englisch">Englisch</option>
                          <option value="Latein">Latein</option>`

        let options2 =  `<option value="">-- choose --</option>
                     <option value="Geschichte">Geschichte</option>
                     <option value="GMK">GMK</option>
                     <option value="WBS">WBS</option>
                     <option value="Kunst">Kunst</option>`

        if(option.value == "o1")
            document.getElementById("subject").innerHTML = options1;
        else if(option.value == "o2")
            document.getElementById("subject").innerHTML = options2;
        else
            document.getElementById("subject").innerHTML = '';
    })

</script>

Answer 2

尝试此