javascript - 将点击功能添加到动态创建的下拉列表中

Question

我有一个从数组创建下拉列表的函数

function populateDropdown(){
var select = document.getElementById("dropdownList");
    var array = ["1", "2", "3"];
        for(var i =0; i < array.length; i++)
        {
        var opt = array[i]
        var ele = document.createElement("option");
        ele.textContent = opt;
        ele.value = opt;
        select.appendChild(ele);
        }
    }

使用以下 HTML:

<select id = "dropdownList">
        <option> Choose a vendor </option>
    </select>

我有一个 JavaScript 函数，它将根据正在使用的下拉项来更改网页的功能。 new_vendor 应该是下拉项的名称，在本例中为“1”、“2”或“3”。

function changeVendor(new_vendor)

如何将 onClick 之类的内容添加到动态下拉列表中，并使用该项目名称调用 changeVendor 函数？

Answer 1

在选择时使用更改事件:

document.querySelector("#dropdownList").addEventListener("change",function(e){
   //here code for change option

   changeVendor(this.value);// in this.value is current value of select
});

标准绑定(bind)将起作用，因为 select 从一开始就在页面上(DOM 加载)，仅动态添加选项，但这对于 select 更改事件没有任何意义。