web-dev-qa-db-fra.com

addEventListener, "change" et sélection des options

J'essaie donc de créer une liste de sélection dynamique à partir d'une sélection pour commencer:

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

et puis le code JavaScript nous avons:

addEventListener("select", addActivityItem, false);

Le problème est que divers événements ne se déclenchent pas lorsque vous avez un élément: pas "changer", car le texte n'est pas différent lorsque vous sélectionnez cet élément; pas "select" (comme je l'ai ici), pour une raison à peu près similaire, parce que je ne sélectionne pas vraiment n'importe quoi b/c il n'y a qu'un seul élément. Quel est l'événement qui devrait être déclenché ici? Il semble ridicule d’inscrire un élément vierge dans ma liste d’options pour déclencher l’événement. J’espère donc qu’il existe une autre solution. Ou est-ce la meilleure solution?

javascriptjavascript-events
44
NovaDev

Vous avez besoin d'un événement de clic pour gérer le type de comportement que vous décrivez.

Tout d’abord, vérifiez si plus d’une option existe déjà.

Sinon, appelez votre fonction addActivityItem.

L'extrait suivant montre comment vous pouvez y parvenir:

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
}

Une démo live est ici sur JSfiddle .

47
Austin Mullins

Le problème est que vous avez utilisé l’option select, c’est là que vous vous êtes trompé. Select signifie qu'un champ de texte ou une zone de texte a un focus. Ce que vous devez faire, c'est utiliser change. "Se déclenche lorsqu'un nouveau choix est fait dans un élément de sélection", également utilisé comme flou lorsque l'on s'éloigne d'une zone de texte ou d'une zone de texte.

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

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

window.addEventListener("load", start, false);
5
Jack Daniels