Usando enlaces href dentro de la etiqueta <opción>
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 Mapa del sitio sean enlaces? Utilicé 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>
ACTUALIZACIÓN 2022: Esta respuesta está bien, pero realmente en 2022 ya no deberíamos hacer esto.
ACTUALIZACIÓN (mayo de 2020): Alguien preguntó en los comentarios por qué no recomendaría esta solución. Supongo que es una cuestión de semántica. Prefiero que mis usuarios naveguen usando <a>
y manteniendo <select>
para hacer selecciones de formularios porque los elementos HTML tienen una reunión semántica y tienen un propósito, lo anchors
llevan a lugares y <select>
sirven para seleccionar cosas de las listas.
Considere, si está viendo una página con un navegador no tradicional (un navegador no gráfico o un lector de pantalla o se accede a la página mediante programación, o JavaScript está deshabilitado), ¿cuál es entonces el "significado" o la "intención" de esto <select>
? ¿Se utiliza para la navegación? Dice "elija el nombre de una página" y no mucho más, ciertamente nada sobre navegación. La respuesta fácil a esto es well i know that my users will be using IE or whatever so shrug
que esto pasa por alto el punto de importancia semántica.
Mientras que un elemento de interfaz de usuario desplegable original 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>
.
RESPUESTA ORIGINAL
<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): Hoy en día, si desea tener un menú desplegable, existen muchas formas posiblemente mejores de implementar uno. Esta respuesta es una respuesta directa a una pregunta directa, pero no recomiendo este método para sitios web públicos.
No puedes usar etiquetas href dentro de las etiquetas de opciones. 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>