更改时不触发JavaScript选择

Question

I have the HTML code:

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

With the function:

function dropdownChange(){

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

changeVendor(this.value);
})
}

The dropdown list is already populated from an array in another function.When first selecting an item from the dropdown, it doesnt fire. However, any changes following the first do fire.

How can I edit my code so that when I first select an item from the dropdown it will fire right away?

Answer 1

This is how your current code works:

1. The first time the change event happens, dropdownChange() runs, because it's called in the element's onchange attribute.

2. dropdownChange() now registers an event listener and returns, doing nothing else.

3. On the next change, the event listener registered by dropdownChange() runs and calls changeVendor(this.value) .

---

You probably want:

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

You can also call changeVendor(this.value) directly in onchange , if you'd like to avoid creating the dropdownChange() function just to call changeVendor() in it:

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

Answer 2

You can use it like bellow, pass the value at the time of selection.

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

And javascript should be something like bellow.

 function dropdownChange(value) {
        alert(value);

    }