由于 Javascript 的另一个选择，如何更改选择的选项？答案

【问题标题】：How to change options of a selection because of another selection with Javascript?由于 Javascript 的另一个选择，如何更改选择的选项？
【发布时间】：2019-10-04 10:09:34
【问题描述】：

如果复选框被选中/因为另一个选择，我想在 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，但我对这一切真的很陌生，所以，你能告诉我什么样的函数可以用来解决这个问题。

【问题讨论】：

添加你的代码，你试图实现的目标
请提供一个最小的工作示例。
如果我们解决了这个问题，Google 将继续为您服务。一步一步走。作为您的帮助，我正在给您步骤 1. 当您单击复选框时创建一个 addEventListner 2. 在此您检查复选框是否选中并执行一些操作如果您卡住然后stackoverflow 总是在这里，那就太简单了跨度>
如果之前忘记添加代码。现在我添加了它。
@sayalok 请给我一个更详细的答案

标签： javascript jquery html forms

【解决方案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>

【讨论】：

有些问题：未捕获的类型错误：无法读取 null 的属性“addEventListener”

【解决方案2】：

试试这个

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

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

function custom_change()
{
    var choose_value = document.getElementById("choose").value;
    var option_1 = "<option value=''>-- choose --</option><option value='Religion'>Religion</option><option value='GMK'>GMK</option><option value='WBS'>WBS</option><option value='Kunst'>Kunst</option>";
    var option_2 = "<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(choose_value == "o1")
            document.getElementById("subject").innerHTML = option_1;
        else if(choose_value == "o2")
            document.getElementById("subject").innerHTML = option_2;
        else
            document.getElementById("subject").innerHTML = '';

}
</script>

【讨论】：