addEventListener, “cambio” y selección de opciones

3 minutos de lectura

avatar de usuario
NovaDev

Estoy tratando de que la lista de selección dinámica se complete sola, desde una sola selección para comenzar:

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

y luego código JavaScript tenemos:

addEventListener("select", addActivityItem, false); 

El problema es que varios eventos no se activan cuando tiene un elemento: no “cambia” porque el texto no es diferente cuando selecciona ese elemento; no “seleccionar” (como lo he hecho aquí), por una razón más o menos similar, porque en realidad no estoy seleccionando nada porque solo hay un elemento. ¿Cuál es el evento que debe ser disparado aquí? Parece una tontería incluir un elemento en blanco en mi lista de opciones para activar el evento, así que espero que haya otra solución. ¿O es esa la mejor solución?

  • Parece que desea que active un controlador onclick independiente que verifique la cantidad de elementos y, si solo hay uno, llame a addActivityItem.

    -Austin Mullins

    21 de julio de 2014 a las 21:51

  • Supongo que solo estoy tratando de averiguar qué evento (si lo hay) se activa cuando hago clic en el elemento seleccionado con solo un elemento, porque en este momento, los que deberían activarse no lo hacen.

    – NovaDev

    21 de julio de 2014 a las 21:54

  • si hace clic, se activará un evento de clic. Si desea activar un evento de selección, puede activar explícitamente document.getElementById(‘activitySelector’).click()

    – Shovan

    22 de julio de 2014 a las 12:47

avatar de usuario
austin mullins

Necesitas un oyente de clics que llame addActivityItem si existen menos de 2 opciones:

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
}

Una demostración en vivo es aquí en JSfiddle.

  • Me di cuenta de que el error estaba en otra parte de mi código y que, después de todo, el evento de clic es el que quiero. Esto es más o menos lo que hice, y estaba en mi pensamiento, por lo que la confirmación es buena. ¡Gracias!

    – NovaDev

    22 de julio de 2014 a las 14:52

  • en su enlace de ejemplo, escribió changed evento, creo que debería ser change

    – Nabi Kaz

    16 oct 2019 a las 21:59

avatar de usuario
jack daniels

El problema es que usaste el Seleccione opción, aquí es donde te equivocaste. Seleccione significa que un cuadro de texto o un área de texto tiene un foco. Lo que tienes que hacer es usar cambio. “Se dispara cuando se realiza una nueva elección en un elemento seleccionado”, también se usa como desenfoque cuando se aleja de un cuadro de texto o un área de texto.

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

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

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

  • Gracias, esto funcionó para mí cuando agregué () a la llamada de función en el detector de eventos, como en “…addEventListener(“change”, addActivityItem(), false);”

    –Joe Coyle

    20/07/2018 a las 15:00

Otra forma de hacer que su código sea comprensible es:

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>

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad