addEventListener,"更改"和选项选择

Question

所以我试图让动态选择列表填充自己,从单个选择开始:

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

然后我们有JavaScript代码:

addEventListener("select", addActivityItem, false); 

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

Answer 1

您需要单击事件来处理您描述的行为.

首先,检查是否已存在多个选项.

如果没有,请调用您的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
}

这是JSfiddle的现场演示.

Answer 2

问题是您使用了select选项，这是您出错的地方。选择表示文本框或textArea具有焦点。您需要做的是使用更改。“在选择元素中做出新选择时触发”，当远离文本框或textArea时也像模糊一样使用。

function start(){
      document.getElementById("activitySelector").addEventListener("change", addActivityItem, false);
      }

function addActivityItem(){
      //option is selected
      alert("yeah");
}

window.addEventListener("load", start, false);