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
});

标准绑定将起作用，因为select从头开始（DOM加载），只有动态添加选项，但这对选择更改事件没有意义。

Answer 2

您可以将事件处理程序附加到父元素，并从事件对象中获取有关已单击元素的信息。

var select = document.getElementById("dropdownList");
select.addEventListener('click', function(event){
    var opt = event.target.innerText;
    changeVendor(opt);
})

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

2 个答案: