从变更事件中触发变更事件

Question

编辑：这是代码的更简单的 JSFiddle 版本，它更简洁地说明了问题：https://jsfiddle.net/Lfo463d9/2/我有一堆表单元素，更新后会更改列表中下一个元素的选项。我有那个工作正常。但是，现在我正在尝试获取它，以便如果根元素发生更改，则它会检查下一个元素以查看它是否是新列表的一部分，如果不是，则将其设为空白，然后触发下一个元素的更改事件（这样它就会反过来使下一个元素空白等等）。更改事件似乎没有触发。我在控制台中没有收到任何错误。这是因为我试图从更改事件中触发更改事件吗？是否有某种阻塞？（或者我只是在做一些愚蠢的事情 - 我大约一周前才开始使用 javascript）我也尝试在 javascript 中的元素上调用 change() 函数。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

您应该尝试收听“输入”事件而不是“更改”。

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