Блог

У меня есть этот список выбора, и он будет заполнять второй список на основе первого выбора списка. Прослушиванию изменений удается получать первый список выбора при каждом изменении, однако второй список выбора не изменяется соответствующим образом. Он просто останется в первом варианте и не изменится. Как мне прослушать изменения во втором списке выбора? Спасибо.

                 <form>
                    <div class="row">
                        <p>
                            <select name="types" id="exectrust_type">
                                <option value="">Select</option>
                                <option value="onese">1 Sole Executor</option>
                                <option value="twoje">2 Joint Executor</option>
                                <option value="threeje">3 Joint Executor</option>
                            </select>
                        </p>
                        <p>
                            <select name="exectrust_number" id="exectrust_number">
                            </select>
                        </p>

                        <p id="clauses"></p>
                    </div>
                </form>

var types = {
    onese: ['0 Backup', '1 Backup', '2 Backup', '2 Joint Backup'],
    twoje: ['0 Backup', '1 Backup'],
    threeje: ['0 Backup'],
};

var ett = document.getElementById('exectrust_type');
var etn = document.getElementById('exectrust_number');

ett.addEventListener('change', function () {
    var selected_option = types[this.value];

    while (etn.options.length > 0) {
        etn.options.remove(0);
    }

    Array.from(selected_option).forEach(function (el) {
        let option = new Option(el, el);
        etn.appendChild(option);
    });

    console.log(ett.value);
    console.log(etn[0].value);
});
  

Добавление прослушивателя событий во 2-й выбор должно быть в порядке.

https://jsfiddle.net/c0wsvab5/1/

 var types = {
  onese: ['0 Backup', '1 Backup', '2 Backup', '2 Joint Backup'],
  twoje: ['0 Backup', '1 Backup'],
  threeje: ['0 Backup'],
};

var ett = document.getElementById('exectrust_type');
var etn = document.getElementById('exectrust_number');

ett.addEventListener('change', function() {
  var selected_option = types[this.value];

  while (etn.options.length > 0) {
    etn.options.remove(0);
  }

  Array.from(selected_option).forEach(function(el) {
    let option = new Option(el, el);
    etn.appendChild(option);
  });

  console.log(ett.value);
  console.log(etn[0].value);
});

// Add event listener should be ok
etn.addEventListener('change', (event) => {
  alert(`The value of 2nd select value ${event.target.value}`);
});  

 <div class="row">
  <p>
    <select name="types" id="exectrust_type">
      <option value="">Select</option>
      <option value="onese">1 Sole Executor</option>
      <option value="twoje">2 Joint Executor</option>
      <option value="threeje">3 Joint Executor</option>
    </select>
  </p>
  <p>
    <select name="exectrust_number" id="exectrust_number">
    </select>
  </p>

  <p id="clauses"></p>
</div>