Блог

Главная - Вопросы по программированию - функция обратного вызова javascript dispatchevent

функция обратного вызова javascript dispatchevent

#javascript #callback

#javascript #обратный вызов

Вопрос:

У меня есть два вложенных выбора, как только я изменяю первый, второй принимает некоторые значения (в соответствии с первым)

Моя проблема возникает, когда я пытаюсь ввести значение по умолчанию в первый select и загрузить html.

Если я использую консоль и вручную выполняю:

     const e = new Event("change");
    
    first_select.dispatchEvent(e);

и после

     second_select.dispatchEvent(e);

Все работает нормально.

Но, когда я хочу сделать это автоматически, я использовал функцию обратного вызова в качестве следующей:

     function function1(callback){
            first_select.dispatchEvent(e);
            console.log("1")
            callback();
        }
    
        function function2(){
            second_select.dispatchEvent(e);
            console.log("2")
        }
    
        function1(function2);

В выводе консоли я вижу 1 и после 2, но второй выбор не показывает мне никаких значений.

Это похоже second_select.dispatchEvent(e); на то, что никогда не выполняется.

Ответ №1:

Вот живой пример того, как это сделать

 let secondSelect = document.querySelector("select[name='sublist']"),
  choices = [['a', 'b', 'c'], ['d', 'e', 'f', 'g'], ['h', 'i']];

document.querySelector("select[name='list']").onchange = function() {
  secondSelect.innerHTML = choices[this.value - 1].map( v => `<option value="${v}">${v}</option>`).join("");
} 
 <select name="list">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<select name="sublist">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

Вот более динамичное решение, вы можете добавить столько свойств, сколько хотите, и то же самое для их значений, так что вы можете создавать любые списки изменений, которые вы хотите.

 let firstSelect = document.querySelector("select[name='list']"),
    secondSelect = document.querySelector("select[name='sublist']"),
    choices = {
      fruits: ["apple", "orange", "mango", "kiwi"],
      vegetables: ["potato", "tomato", "onion"]
};

firstSelect.onchange = function() {
  // just get the right property from choices and loop over that
  // array and create  an option from each item
  secondSelect.innerHTML = choices[this.value].map( v => `<option value="${v}">${v}</option>`).join("");
};

// initialise the second select for the first time
firstSelect.onchange(); 
 <select name="list">
  <option value="fruits">fruits</option>
  <option value="vegetables">vegetables</option>
</select>

<select name="sublist">
</select>