addEventListener, “change” and option selection

问题

I'm trying to have dynamic select list populate itself, from a single selection to start:

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

and then JavaScript code we have:

addEventListener("select", addActivityItem, false);

The problem is that various events don't fire when you have one item: not "change" because, the text is no different when you select that item; not "select" (as I have here), for a roughly similar reason, because I'm not really selecting anything because there's only one item. What is the event that should be fired here? It seems silly to list a blank item in my option list to fire the event, so I hope there is another solution. Or is that the best solution?

回答1:

You need a click event to handle the kind of behavior you've describe.

First, check to see if more than one option already exists.

If not, call your addActivityItem function.

The following snippet demonstrates how you may achieve that:

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
}

A live demo is here on JSfiddle.

回答2:

The problem is that you used the select option, this is where you went wrong. Select signifies that a textbox or textArea has a focus. What you need to do is use change. "Fires when a new choice is made in a select element", also used like blur when moving away from a textbox or textArea.

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

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

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

来源：https://stackoverflow.com/questions/24875414/addeventlistener-change-and-option-selection

标签

javascript

dom-events