为动态创建的下拉列表添加单击功能

Adding on click functionality to a dynamically created dropdown list

本文关键字：添加 单击 功能 下拉列表 动态 创建      更新时间：2023-09-26

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

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函数?

Use change event on select:

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加载)，只有选项是动态添加的，但这对select更改事件没有意义。

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

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