addEventListener,“change"还有选项选择

addEventListener, "change" and option selection

本文关键字：选项 选择 quot change addEventListener      更新时间：2023-09-26

我试图有动态选择列表填充自己，从一个单一的选择开始:

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

JavaScript代码是:

addEventListener("select", addActivityItem, false);

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

如果存在少于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
}

问题是您使用了选择选项，这就是您出错的地方。选择表示文本框或textArea有焦点。您需要做的是使用change。"当选择元素中出现一个新的选择时触发"，当从文本框或文本区域移开时也会像模糊一样使用。

function start(){
      document.getElementById("activitySelector").addEventListener("change", addActivityItem, false);
      }
function addActivityItem(){
      //option is selected
      alert("yeah");
}
window.addEventListener("load", start, false);

另一种使代码易于理解的方法是:

let selector = document.getElementById("Selector"); 
let result = document.getElementById("result"); 
// when client clicked on select element 
selector.addEventListener("click", () => {
// if default value is changed
  selector.addEventListener("change", () => {
  // if value switched by client
    switch (selector.value) {
      case "add":
      //do somthing with  , "add" value
        result.innerHTML = selector.value;
        break;  // then take break
      case "remove":
      //do somthing with  , "remove" value
        result.innerHTML = selector.value;
        break; // then take break
    }
  });
});
#Selector{
margin: 1rem 0;
}
<label for"Selector">chose an option:</label>
<select id="Selector" name="Selector" >
      <option value="add">Add new item</option>
      <option value="remove">Remove existing item</option>
</select>
<div id="result">option selected : "The default value is first option"</div>

相关文章：