Javascript 选择更改不会第一次尝试触发

Question

我有 HTML 代码:

<select id = "dropdownList" onchange = "dropdownChange()">
        <option> Choose a vendor </option>
    </select>

具有以下功能:

function dropdownChange(){

document.querySelector("#dropdownList").addEventListener("change",function(e){

changeVendor(this.value);
})
}

下拉列表已从另一个函数中的数组填充。当第一次从下拉列表中选择一个项目时，它不会触发。但是，第一个之后的任何更改都会触发。

如何编辑我的代码，以便当我第一次从下拉列表中选择一个项目时它会立即触发？

Answer 1

这就是您当前代码的工作原理:

1. 第一次发生更改事件时，dropdownChange() 会运行，因为它是在元素的 onchange 属性中调用的。

2. dropdownChange() 现在注册一个事件监听器并返回，不执行任何其他操作。

3. 在下一次更改时，由 dropdownChange() 注册的事件监听器运行并调用 changeVendor(this.value)。

<小时/>

您可能想要:

function dropdownChange() {
    changeVendor(this.value);
}

如果您想避免创建 dropdownChange()，您还可以直接在 onchange 中调用 changeVendor(this.value)函数只是为了调用其中的 changeVendor() :

<select onchange="changeVendor(this.value)">
    <option>Choose a vendor</option>
</select>