javascript - addEventListener， "change"和选项选择

Question

我正在尝试让动态选择列表自行填充，从单个选择开始:

<select id="activitySelector">
      <option value="addNew">Add New Item</option>
</select>

然后是 JavaScript 代码:

addEventListener("select", addActivityItem, false); 

问题是当你有一个项目时，各种事件不会触发:不是“改变”，因为当你选择那个项目时，文本没有什么不同；出于大致相似的原因，而不是“选择”(就像我在这里所做的那样)，因为我并没有真正选择任何东西，因为只有一个项目。这里应该触发什么事件？在我的选项列表中列出一个空白项来触发事件似乎很愚蠢，所以我希望有另一种解决方案。或者这是最好的解决方案？

Answer 1

如果存在的选项少于 2 个，您需要一个调用 addActivityItem 的点击监听器:

var activities = document.getElementById("activitySelector");

activities.addEventListener("click", function() {
    var options = activities.querySelectorAll("option");
    var count = options.length;
    if(typeof(count) === "undefined" || count < 2)
    {
        addActivityItem();
    }
});

activities.addEventListener("change", function() {
    if(activities.value == "addNew")
    {
        addActivityItem();
    }
});

function addActivityItem() {
    // ... Code to add item here
}

现场演示是 here on JSfiddle .