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

这是您当前代码的工作方式：

第一次发生更改事件时，dropdownChange()会运行，因为它会在元素的onchange属性中调用。
dropdownChange()现在注册一个事件监听器并返回，不执行任何其他操作。
在下一次更改时，dropdownChange()注册的事件侦听器会运行并调用changeVendor(this.value)。

你可能想要：

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

您还可以直接在changeVendor(this.value)中致电onchange，如果您想避免创建dropdownChange()功能，只需在其中调用changeVendor()：

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

Answer 2

您可以像下面一样使用它，在选择时传递值。

<select id = "dropdownList" onchange = "dropdownChange(this.value)">
    <option> Choose a vendor </option>
    <option value="test"> test </option>
    <option value="test1"> test1 </option>
</select>

javascript应该像下面这样。

 function dropdownChange(value) {
        alert(value);

    }

Javascript选择更改并不首先尝试

2 个答案: