Запуск событий изменения из события изменения

Question

РЕДАКТИРОВАТЬ: вот гораздо более простая версия кода JSFiddle, которая иллюстрирует проблему более кратко:

https://jsfiddle.net/Lfo463d9/2/

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

Я не получаю никаких ошибок в консоли.

Это потому, что я пытаюсь вызвать событие изменения из события изменения? Идет ли какая-то блокировка?

(или я просто делаю что-то глупое - я запустил javascript примерно неделю назад)

Я пытался вызвать функцию change ()элемент в javascript тоже.

function addChainOptions(anelementID, nextelementID, listToChangeID, firstToSecond, secondFromFirst)
  { var anelement = document.getElementById(anelementID);
    anelement.addEventListener("change", function() {

      var nextelement = document.getElementById(nextelementID);
      var listToChange = document.getElementById(listToChangeID);

      console.log(this.id + "has changed");
      if(this.value.length == 0)
      {
        nextelement.value = "";
        $("#" + nextelementID).change();
      }

      nextelement.disabled = true; 

      google.script.run.withSuccessHandler(function(value) {

         htmlOptions = value.map(function(r){return '<option value = "' + r[0] + '">';}).join(" ")

         listToChange.innerHTML = htmlOptions;


           if(value.length == 1) {
             nextelement.value = value[0];
             nextelement.change();
           } 
           if(value.includes(nextelement.value) == false && nextelement.value.length > 0)
           {
             nextelement.value = "";
             console.log(nextelement.id + "set to blank - triggering change")
             $("#" + nextelementID).change();
           }
           nextelement.removeAttribute("disabled");

      }).subListLookUp(firstToSecond, secondFromFirst, this.value);   
    });

  };

  addChainOptions("productTypesInput01", "productsInput01", "productsList01", "ProductTypeMulti", "Products"); 
  addChainOptions("brandsInput01", "productTypesInput01", "productTypesList01", "BrandToProductType", "ProductTypeFromBrand"); 
  addChainOptions("category", "brandsInput01", "brandsList01", "CategoryToBrand", "BrandFromCategory");

В данный момент он устанавливает следующий пустой, и пытается вызвать изменение, но ничего не происходит.

Answer 1

Вы должны попробовать прослушать событие «input» вместо «change».

const firstinput = document.getElementById("input1");
const secondinput = document.getElementById("input2");
const thirdinput = document.getElementById("input3");

function dispatchEvent(target, eventType) {
 var event = new Event( eventType, {
    bubbles: true,
    cancelable: true,
	});
  target.dispatchEvent(event);
}

firstinput.addEventListener("input", function() {  
  secondinput.value = 2;
  dispatchEvent(secondinput,"input");
});

secondinput.addEventListener("input", function() {  
  thirdinput.value = 3;
  //dispatchEvent(thirdinput,"input"); 
});

<input id="input1">
<input id="input2">
<input id="input3">