HTML elemento select onChange detonante de la opción seleccionada ya

tengo el siguiente código HTML que contiene una lista desplegable (selección simple)HTML elemento select onChange detonante de la opción seleccionada ya

 <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#garden").bind('change', function() { 
        alert("Changed"); 
        }); 
      }); 
     </script> 
    <body> 
     <div id="content"> 
      <select id="garden"> 
      <option value="flowers">Flowers</option> 
      <option value="shrubs">Shrubs</option> 
      <option value="trees">Trees</option> 
      <option value="bushes">Bushes</option>     
      </select> 
     </div> 
    </body> 
</html>

Cuando se procesa la página HTML, Flowers es el elemento ya seleccionado en el desplegable abajo por defecto (siendo el primero). Si selecciono otro valor (que no sea "Flores"), se activa la función javascript y se muestra un cuadro de alerta que contiene "Cambiado".

Q1: Pero, en caso de que vuelva a seleccionar Flowers de nuevo, el evento onchange no se desencadena. Entiendo que es porque nada fue 'cambiado' en la lista desplegable. ¿Hay alguna manera de activar una función incluso cuando no se realiza ningún cambio en el valor ya seleccionado en el menú desplegable?

Q2: cómo extraer el valor del elemento que se acaba de seleccionar (incluso si no se seleccionó nada nuevo, es decir, el usuario hizo clic en el menú desplegable y simplemente hizo clic en otro lugar).

Ya he probado el "onblur" pero eso requiere que el usuario haga clic en otra parte del documento para que el menú desplegable pierda el foco. Cualquier ayuda sería realmente apreciada.

Muchas gracias. [He editado las cabeceras HTML y otras inclusiones de secuencia de comandos en el fragmento de código proporcionado por razones de brevedad.]

Fuente

2010-07-28 Shrey

Bueno, yo creo que no te entiendo 100%, pero algunas cosas que puedo sugerir aquí son:

enlazar un controlador de eventos click a la select

$("#garden").bind('click', function() { 
    alert($(this).find('option:selected').text()); 
});

se unen una focusout controlador de eventos

$("#garden").bind('focusout', function() { 
    alert($(this).find('option:selected').text()); 
});

y, por supuesto, vincula el controlador de eventos change que ya tienes. El click event handler puede ser un poco complicado ya que se dispararía cada vez que haga clic en el elemento. Pero si no lo hace alert() cada vez que no debería ser un problema en absoluto, tiene la selección actual y puede hacer con ella lo que quiera.

Fuente

2010-07-28 15:31:40 jAndy

Wow, gracias por esto. Funciona casi perfectamente para mí: D – Shrey

Pregunta 1: Creo que el evento de que sería "onSelect".

Pregunta 2: Creo que el evento "onSelect" también funcionaría para eso, no 100% seguro. Algo para probar al menos y meterse con.

Fuente

2010-07-28 15:21:44

No, onselect tampoco funciona :(. De hecho, onselect ni siquiera se dispara para seleccionar el menú desplegable, volver a seleccionar alguna opción, soltar el mouse, hacer clic en cualquier otro lugar del documento. Cualquier idea de qué se trata hace? (Lo siento, soy un novato en javascript y HTML) – Shrey

Puede activar manualmente el evento cuando se carga la página:

$(document).ready(function() { 
    $("#garden").bind("change", function() { 
     // ... 
    }).change(); 
});

Este recogerá el valor inicial - por lo que creo que hace que su segunda pregunta irrelevante. Esto no funcionará en todas las situaciones (¡espero que su controlador real no sea una alerta, pero en realidad sea útil!), Pero podría ser útil ...

Fuente

2010-07-28 15:34:44 Jon

Hmm, esa es una sugerencia interesante. Volveremos después de probarlo. – Shrey

¿Estás seguro de que lo que sea que estés haciendo es la forma más sensata de hacer las cosas? Parece que una IU muy extraña tiene un comportamiento diferente si selecciona un elemento dejándolo como predeterminado en comparación con seleccionarlo abriendo la selección y seleccionando el elemento seleccionado actualmente.

Si quiere hacer que elijan flores de forma explícita, tal vez desee una entrada ficticia en la parte superior que diga "Elija una" que significará que se ven obligados a cambiar a flores si eso es lo que quieren. Probablemente sería más simple que complicar tu código con más controladores de eventos y cosas por el estilo.

Si realmente necesita ir por el camino que está siguiendo, entonces es posible que desee considerar cuál es el comportamiento si alguien solo controla el control y luego lo pasa. es decir, ¿debería disparar también tu script?

Editar para responder a comentar en detalle:

Lo que se quiere hacer en este caso es el manejador de gancho en onSubmit de la forma. Esto se llama, como se puede imaginar, cuando se envía el formulario. Si su controlador devuelve falso, ese formulario no se enviará.

Este controlador es tradicionalmente donde haría la validación del lado del cliente examinando el estado de los elementos que le interesan y controlando que sus valores sean válidos. En este caso, verificaría si el valor del jardín era "N/A" o lo que sea que lo haya configurado y, si es así, mostrará una alerta (en el caso más simple) y posiblemente marque los campos que requieran atención. Luego, el usuario elegirá una entrada válida (con suerte) y la próxima vez que envíe su validación tendrá éxito, devolverá verdadero en el controlador y el usuario puede estar contento de haber enviado una entrada válida.

Como siempre, la exención de responsabilidad estándar de que cualquier información puede ser enviada a su servidor por un determinado usuario, por lo que no debe suponer que solo tiene esta validación de que está obteniendo datos válidos en el servidor. :)

Fuente

2010-07-28 15:37:22 Chris

En realidad, ¿qué? Lo pregunté fue porque estaba probando el manejo de eventos antes de incorporarlo a mi aplicación. Entiendo que la situación actual (js activador basado en la selección por defecto vs. explícita) es una IU mala, y "Por favor elija una" es exactamente lo que quiero. es que el usuario puede terminar eligiendo "Por favor, elija uno", en cuyo caso necesito transmitirle que sus acciones no son válidas (también puedo ser pasivo; sin nada, pero ese no es mi objetivo). Otro problema es que no le permite seleccionar "Elija uno", ¿alguna pista sobre cómo hacer esto? – Shrey

@Shrey: Respondí tu pregunta en mi respuesta para que no se arrugara en un comentario (que creo que era demasiado logn para de todos modos). – Chris

Muchas gracias por su respuesta. Eso tiene sentido y parece ser lo más obvio que debería haber hecho :) .. Gracias una vez más. (Aumentando el comentario ya que no puedo hacer lo mismo con "respuesta" dos veces). – Shrey

En mi opinión, la solución más fácil es duplicar la primera opción en un elemento oculto y deshabilitado que tenga la misma etiqueta. Su lista desplegable mostrará la etiqueta de la opción oculta, pero por lo tanto no se mostrará en la lista.

<select id="garden" name="blabla" onchange="this.form.submit();" > 
    <option value="" disabled selected style="display:none;">Flowers</option> 
    <option value="flowers" >Flowers</option> 
    <option value="shrubs" >Schrubs</option> 
    <option value="trees" >Trees</option> 
    <option value="bushes" >Bushes</option> 
</select>

Su pregunta parece igual que HTML SELECT - Trigger JavaScript ONCHANGE event even when the option is not changed y la solución mencionado anteriormente fue proporcionado por Simon Aronsson.

Nota bene: la solución funciona perfectamente con Firefox, pero no con Internet Explorer.

Fuente

2018-01-02 15:18:22 OuzoPower

HTML elemento select onChange detonante de la opción seleccionada ya

Respuesta

Cuestiones relacionadas