addEventListener, “change” und Optionsauswahl

Lesezeit: 3 Minuten

Benutzeravatar von NovaDev
NovaDev

Ich versuche, dass sich die dynamische Auswahlliste von einer einzelnen Auswahl zu Beginn selbst füllt:

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

und dann haben wir JavaScript-Code:

addEventListener("select", addActivityItem, false); 

Das Problem ist, dass verschiedene Ereignisse nicht ausgelöst werden, wenn Sie ein Element haben: nicht “Ändern”, weil der Text nicht anders ist, wenn Sie dieses Element auswählen; nicht “auswählen” (wie ich es hier habe), aus einem ungefähr ähnlichen Grund, weil ich nicht wirklich etwas auswähle, weil es nur ein Element gibt. Was ist das Ereignis, das hier gefeuert werden soll? Es scheint albern, ein leeres Element in meiner Optionsliste aufzulisten, um das Ereignis auszulösen, also hoffe ich, dass es eine andere Lösung gibt. Oder ist das die beste Lösung?

  • Anscheinend möchten Sie, dass ein separater Onclick-Handler ausgelöst wird, der die Anzahl der Elemente überprüft und, wenn es nur eines gibt, addActivityItem aufruft.

    – Austin Mullins

    21. Juli 2014 um 21:51 Uhr

  • Ich denke, ich versuche nur herauszufinden, welches Ereignis (falls vorhanden) ausgelöst wird, wenn ich auf das ausgewählte Element mit nur einem Element klicke, denn im Moment werden diejenigen, die ausgelöst werden sollten, nicht ausgelöst.

    – NovaDev

    21. Juli 2014 um 21:54 Uhr

  • Wenn Sie klicken, wird ein Klickereignis ausgelöst. Wenn Sie ein select-Ereignis auslösen möchten, können Sie explizit document.getElementById(‘activitySelector’).click() auslösen.

    – Schowan

    22. Juli 2014 um 12:47 Uhr

Benutzeravatar von Austin Mullins
Austin Mullins

Sie benötigen einen Klick-Listener, der aufruft addActivityItem wenn weniger als 2 Möglichkeiten bestehen:

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
}

Eine Live-Demo ist hier auf JSfiddle.

  • Mir wurde klar, dass der Fehler an einer anderen Stelle in meinem Code lag und dass das Click-Ereignis schließlich das ist, was ich will. Das habe ich so gemacht und war in meinem Denken, also ist die Bestätigung gut. Vielen Dank!

    – NovaDev

    22. Juli 2014 um 14:52 Uhr

  • in Ihrem Beispiellink, schrieb changed Ereignis, denke ich, sollte sein change

    – Nabi KAZ

    16. Oktober 2019 um 21:59 Uhr

Benutzeravatar von Jack Daniels
Jack Daniels

Das Problem ist, dass Sie die verwendet haben auswählen Option, hier haben Sie einen Fehler gemacht. Auswählen bedeutet, dass ein Textfeld oder eine textArea einen Fokus hat. Was Sie tun müssen, ist zu verwenden Rückgeld. “Wird ausgelöst, wenn in einem ausgewählten Element eine neue Auswahl getroffen wird”, wird auch wie Unschärfe verwendet, wenn Sie sich von einem Textfeld oder Textbereich entfernen.

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

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

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

  • Danke, das hat bei mir funktioniert, als ich () zum Funktionsaufruf im Ereignis-Listener hinzugefügt habe, wie in “…addEventListener(“change”, addActivityItem(), false);”

    – Joe Coyle

    20. Juli 2018 um 15:00 Uhr

Eine andere Möglichkeit, Ihren Code verständlich zu machen, ist:

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>

1430780cookie-checkaddEventListener, “change” und Optionsauswahl

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy