Question

所以我试图让动态选择列表填充自己，从一个选择开始：

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

然后我们有JavaScript代码：

addEventListener("select", addActivityItem, false);

问题是当你有一件物品时，各种事件都不会发生：不是＆＃34;改变＆＃34;因为，当你选择那个项目时，文字没有什么不同;不是＆＃34;选择＆＃34; （因为我在这里），由于大致相似的原因，因为我并没有真正选择任何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
}

现场演示为here on JSfiddle。

Answer 2

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

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

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

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

addEventListener，“更改”和选项选择

2 个答案: