將onclick事件添加到動態選擇下拉菜單中的選項中

Question

我有一個從JavaScript中的數組創建的下拉列表。 我想在更改下拉值時對選定的值進行操作。

var newArray = [3,5,4,6]

var container = document.getElementById('container')
var dropdown = creatSelectDropDown('thisDropdown', newArray)
container.appendChild(dropdown)

function creatSelectDropDown(id, array) {

    var dropdown = document.createElement("select");
    dropdown.id = id;

    for (var i = 0; i < array.length; i++) {
        var option = document.createElement("option");
        option.text = array[i];
        option.value =  array[i];
        dropdown.options.add(option);
    }


    return dropdown;
}

因此，在上面的代碼中，我要么擁有：

option.onclick = dosomething();

要么

dropdown.onchange = dosomething(getvalueofoptiontag);

我顯然在這里缺少簡單的東西...

小提琴玩： https : //jsfiddle.net/reko91/hnLxt4xh/1/

Answer 1

可以使用以下語法綁定功能以進行更改：

dropdown.onchange = function(event) {
   console.log(event);
}

或使用eventListener：

dropdown.addEventListener("change", function(event) {
   console.log(event);
}, false);

您做錯了什么，您必須將一個函數傳遞給onchange事件，例如：

var dosomething = function() { /* do something */}
dropdown.onchange = dosomething;