javascript - example - Redirigir automáticamente al seleccionar un elemento de una lista desplegable de selección

jquery innertext

Question

Esta página lo hace como yo quiero: http://www.web-source.net/javascript_redirect_box.htm

Pero quiero encontrar una forma mejor de usar jQuery, ¿alguien puede indicarme un buen script que use jQuery para lograr esto?

Answer 1

La respuesta simple, como sugiere Daniel, es que no debe hacer esto, es malo para la usabilidad y la accesibilidad.

El comportamiento de la lista de selección depende de una combinación del sistema operativo del usuario, el navegador y la configuración del usuario (para ambos). A esto se añade el hecho de que el evento onchange no se implementa de manera estándar en los navegadores.

Los usuarios deben poder tener el comportamiento esperado de una lista de selección, independientemente de si usan mouse, teclado o mousewheel o (voz, lector de pantalla, lo que sea ...). Si vincula un evento al cambio, nunca debe ser uno que quite el foco del usuario de la lista de selección, por ejemplo. redirección de página.

(Personalmente, navego mucho por el sitio formando un teclado, y si esto sucede, grito)

Answer 2

No necesita un script preempaquetado para esto, solo un par de líneas de código.

// get your select element and listen for a change event on it
$(''#selectEl'').change(function() {
  // set the window''s location property to the value of the option the user has selected
  window.location = $(this).val();
});

Answer 3

Otros han dado buenas respuestas sobre cómo hacer esto, pero ...

Solo una advertencia, IE maneja la lista de selección en Cambiar de forma muy diferente a otros navegadores cuando alguien navega a través de un teclado. Cuenta cada pulsación de tecla arriba / tecla como un evento onChange, lo que significa que no puede navegar una lista de selección de redireccionamiento a través del teclado, lo que elimina la accesibilidad para los usuarios que no pueden usar el mouse. (Otros navegadores esperan un evento "enter", o una pestaña de la lista de selección, antes de activar el cambio.) He pasado mucho, mucho tiempo tratando de hackear una solución para esto, y nunca resolvió completamente el problema.

No sé si jQuery da cuenta de esto; con suerte lo hace, para el acceso de su sitio.

Puede valer la pena hacer que la lista de selección elija dónde ir, luego tener un botón al lado de ella realmente activa la redirección. (A menos que no se preocupe por la accesibilidad de los usuarios de IE)

Answer 4

usando jQuery:

$(''#selectEl'').bind("change keyup",function()
{
  // set the window''s location property to the 
  // value of the option the user has selected
  window.location = $(this).val();
});

funciona para el cambio habitual de opciones y teclas de flecha.

Es posible que pueda utilizar esta extensión: http://plugins.jquery.com/project/mousewheel No lo he probado todavía. :)

También hay opciones de mouse que puede agregar a bind () allí. Vaya a: api.jquery.com/category/events/mouse-events/. Cualquier función que haya es un nombre () para en esa página, puede usar su ''nombre'' en bind () arriba. Del mismo modo que lo hice con change () => ''change'' y mouseup () => ''mouseup'' - easy peasy :)

• ¡Paz!

Answer 5

No he probado esto, pero creo que es equivalente a la muestra en la página a la que hizo referencia.

$(document).ready( function() {
   $(''#select'').change( function() {
      location.href = $(this).val();
   });
});

<select id="select">
    <option value="#">Select a location</option>
    <option value="location.htm">Location</option>
    <option value="other.htm">Other</option>
</select>