Как изменить параметры выбора из-за другого выбора с 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" 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>

Answer 2

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