编辑:这是一个更简单的 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");
目前,它将下一个设置为空白并尝试触发更改,但没有任何反应。
最佳答案
您应该尝试监听“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">
关于javascript - 从更改事件中触发更改事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58794815/