usando enlaces href dentro de la etiqueta <option>


139

Tengo el siguiente código HTML:

<select name="forma">
    <option value="Home">Home</option>
    <option value="Contact">Contact</option>
    <option value="Sitemap">Sitemap</option>
</select>

¿Cómo puedo hacer que los valores de Inicio , Contacto y Sitemap sean enlaces? Usé el siguiente código y, como esperaba, no funcionó:

<select name="forma">
    <option value="Home"><a href="home.php">Home</a></option>
    <option value="Contact"><a href="contact.php">Contact</a></option>
    <option value="Sitemap"><a href="sitemap.php">Sitemap</a></option>
</select>

Simplemente puede seguir el siguiente enlace de ayuda stackoverflow.com/questions/12287672/… Espero que pueda ayudar
Bikram Shrestha

Tal vez esta solución que no sea JavaScript ayudaría: stackoverflow.com/questions/9953482/…
Melsi

Respuestas:


267
<select name="forma" onchange="location = this.value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>

ACTUALIZACIÓN (noviembre de 2015): en la actualidad, si desea tener un menú desplegable, hay muchas formas posiblemente mejores de implementar uno. Esta respuesta es una respuesta directa a una pregunta directa, pero no defiendo este método para los sitios web públicos.

ACTUALIZACIÓN (mayo de 2020): alguien preguntó en los comentarios por qué no abogaría por esta solución. Supongo que es una cuestión de semántica. Prefiero que mis usuarios naveguen <a>y utilicen <select>para realizar selecciones de formularios porque los elementos HTML tienen una reunión semántica y tienen un propósito, anchorsllevarlos a lugares, <select>son para elegir cosas de las listas.

Considere, si está viendo una página con un navegador no tradicional (un navegador no gráfico o lector de pantalla o se accede a la página mediante programación, o JavaScript está deshabilitado), ¿cuál es el "significado" o la "intención" de esto <select>que tiene? utilizado para la navegación? Dice "elija un nombre de página" y no mucho más, ciertamente nada sobre navegar. La respuesta fácil a esto es, well i know that my users will be using IE or whatever so shrugpero esto pierde un poco el punto de importancia semántica.

Mientras que un elemento UI desplegable funky hecho de elementos de diseño adecuados (y algunos js) que contienen algunos anclajes regulares aún conserva su intención incluso si el elemento de diseño se pierde, "estos son un montón de enlaces, seleccione uno y navegaremos allí" .

Aquí hay un artículo sobre el mal uso y abuso de<select> .


66
Simplemente cambie los valores a home.php, contact.php y sitemap.php.
Jason Rowe el

16
¡muy genial! ¡también puedes usar este código <option value="#anchor_on_my_site">...</option>para vincular a un ancla!
pruett

3
Sé que esto es muy trivial, pero debería ser "onchange" y no "ONCHANGE"
Oliver Dixon

3
Puedes acortarlo alocation = this.value;
Juan Mendes

2
solo para hacerle saber que su enlace no funciona para formas de implementar uno
John

18

No puede usar etiquetas href dentro de etiquetas opcionales. Necesitará javascript para hacerlo.

<select name="formal" onchange="javascript:handleSelect(this)">
<option value="home">Home</option>
<option value="contact">Contact</option>
</select>

<script type="text/javascript">
function handleSelect(elm)
{
window.location = elm.value+".php";
}
</script>

14

Utilice un menú desplegable real en su lugar: una lista ( ul, li) y enlaces. Nunca use mal los elementos de formulario como enlaces.

Los lectores con lectores de pantalla generalmente escanean a través de una lista de enlaces generada automáticamente, se perderán esta información importante. Muchos sistemas de navegación por teclado (por ejemplo, JAWS, Opera) ofrecen diferentes atajos de teclado para enlaces y elementos de formulario.

Si aún no puede abandonar la idea de un selectno utilice el onchangecontrolador al menos. Esto es un verdadero dolor para los usuarios de teclado, hace que su tercer elemento sea casi inaccesible.


2
toscho es correcto, por supuesto, la aplicación de makmour es un mal uso masivo de los campos de formulario.
gingerbreadboy

Correcto, pero ¿qué pasa con los dispositivos móviles? Si la respuesta aceptada se combina con un menú desplegable real con un interruptor "display: hidden" en la consulta de medios, ¿sus inquietudes siguen siendo válidas? ¿O tienes una mejor solución?
Skippy le Grand Gourou

1
@SkippyleGrandGourou La mejor solución es usar solo un menú con enlaces reales.
fuxia

7

La solución aceptada se ve bien, pero hay un caso que no puede manejar:

El evento "onchange" no se activará cuando se vuelva a seleccionar la misma opción. Entonces, se me ocurrió la siguiente mejora:

HTML

<select id="sampleSelect" >
  <option value="Home.php">Home</option>
  <option value="Contact.php">Contact</option>
  <option value="Sitemap.php">Sitemap</option>
</select>

jQuery

$("select").click(function() {
  var open = $(this).data("isopen");
  if(open) {
    window.location.href = $(this).val()
  }
  //set isopen to opposite so next time when use clicked select box
  //it wont trigger this event
  $(this).data("isopen", !open);
});

3
O simplemente agregue una opción vacía al principio:<option value="">&nbsp;</option>
Kai Noack

5

(No tengo suficiente reputación para comentar la respuesta de toscho).

No tengo experiencia con lectores de pantalla y estoy seguro de que sus puntos son válidos.

Sin embargo, en cuanto al uso de un teclado para manipular selecciones, es trivial seleccionar cualquier opción usando el teclado:

TAB al control

ESPACIO para abrir la lista de selección

Flechas ARRIBA o ABAJO para desplazarse al elemento de lista deseado

ENTER para seleccionar el elemento deseado

Solo en ENTER se activa el evento onchange o (JQuery .change ()).

Si bien personalmente no usaría un control de formulario para menús simples, hay muchas aplicaciones web que usan controles de formulario para cambiar la presentación de la página (por ejemplo, el orden de clasificación). AJAX puede implementarlos para cargar contenido nuevo en el página o, en implementaciones anteriores, activando nuevas cargas de página, que es esencialmente un enlace de página.

En mi humilde opinión, estos son usos válidos de un control de formulario.



2
    <select name="career" id="career" onchange="location = this.value;">
        <option value="resume" selected> All Applications </option>
        <option value="resume&j=14">Seo Expert</option>
        <option value="resume&j=21">Project Manager</option>
        <option value="resume&j=33">Php Developer</option>
    </select>

Si bien este código puede responder la pregunta, proporcionar un contexto adicional con respecto a cómo y / o por qué resuelve el problema mejoraría el valor a largo plazo de la respuesta.
rgmt

-7

Prueba este código

<select name="forma" onchange="location = this.options[this.selectedIndex].value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.