usando links href dentro da tag <option>

139

Eu tenho o seguinte código HTML:

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

Como posso criar valores de Início , Contato e Sitemap como links? Usei o seguinte código e, como esperava, não funcionou:

<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>
makmour
fonte
Você pode simplesmente seguir helpfollowing ligação stackoverflow.com/questions/12287672/... esperança de que a ajuda pode
Bikram Shrestha
Talvez esta solução não javascript ajudaria: stackoverflow.com/questions/9953482/...
Melsi

Respostas:

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>

ATUALIZAÇÃO (novembro de 2015): hoje em dia, se você quiser ter um menu suspenso, existem muitas maneiras indiscutivelmente melhores de implementar um. Esta resposta é uma resposta direta a uma pergunta direta, mas eu não defendo esse método para sites públicos.

ATUALIZAÇÃO (maio de 2020): Alguém perguntou nos comentários por que eu não defendia essa solução. Eu acho que é uma questão de semântica. Prefiro que meus usuários naveguem usando <a>e sejam mantidos <select>para fazer seleções de formulário, porque os elementos HTML têm reunião semântica e têm um propósito, anchorslevam você a lugares, <select>servem para escolher itens das listas.

Considere que, se você estiver visualizando uma página com um navegador não tradicional (um navegador não gráfico ou leitor de tela ou a página for acessada de forma programática ou o JavaScript estiver desativado), qual é o "significado" ou a "intenção" deste documento <select>? usado para navegação? Está dizendo "escolha um nome de página" e não muito mais, certamente nada sobre navegação. A resposta fácil para isso é, well i know that my users will be using IE or whatever so shrugmas isso meio que perde o ponto de importância semântica.

Enquanto um elemento de interface do usuário suspenso e descolado, feito de elementos de layout adequados (e alguns js) contendo algumas âncoras regulares, ainda mantém a intenção, mesmo se o elemento de layout for perdido, "esses são vários links, selecione um e navegaremos lá" .

Aqui está um artigo sobre o uso indevido e abuso de<select> .

gingerbreadboy
fonte
6
Basta alterar os valores para home.php, contact.php e sitemap.php.
Jason Rowe
16
muito legal! você pode usar esse código com <option value="#anchor_on_my_site">...</option>para vincular a uma âncora também!
24612 Pruett
3
Eu sei que isso é muito trivial, mas deve ser "onchange" e não "onchange"
Oliver Dixon
3
Você pode abreviá-lo paralocation = this.value;
Juan Mendes
2
apenas para que você saiba que o seu link não funciona para maneiras de implementar um #
John
18

Você não pode usar tags href dentro das tags de opção. Você precisará de javascript para fazer isso.

<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>
Zaje
fonte
14

Use um menu suspenso real: uma lista ( ul, li) e links. Nunca use elementos de formulário como links.

Os leitores com leitores de tela geralmente examinam uma lista de links gerada automaticamente - eles perderão essas informações importantes. Muitos sistemas de navegação por teclado (por exemplo, JAWS, Opera) oferecem atalhos de teclado diferentes para links e elementos de formulário.

Se você ainda não pode abandonar a ideia de a select, não use onchangepelo menos o manipulador. Isso é uma verdadeira dor de cabeça para os usuários de teclado, pois torna seu terceiro item quase inacessível.

fuxia
fonte
2
toscho está correto, é claro, a aplicação do makmour é um uso indevido maciço de campos de formulário.
gingerbreadboy
Certo, mas e os dispositivos móveis? Se a resposta aceita for associada a um menu suspenso real com uma opção "display: hidden" na consulta de mídia, suas preocupações ainda são válidas? Ou você tem uma solução melhor?
Skippy le Grand Gourou
1
@ SkippyleGrandGourou A melhor solução é usar apenas um menu com links reais.
Fuxia
7

A solução aceita parece boa, mas há um caso que não pode ser resolvido:

O evento "onchange" não será acionado quando a mesma opção for selecionada novamente. Então, eu vim com a seguinte melhoria:

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);
});
Oscar Zhang
fonte
3
Ou apenas adicione uma opção vazia no começo: #<option value="">&nbsp;</option>
Kai Noack
5

(Não tenho reputação suficiente para comentar a resposta de toscho.)

Não tenho experiência com leitores de tela e tenho certeza de que seus pontos são válidos.

No entanto, quanto ao uso de um teclado para manipular seleções, é trivial selecionar qualquer opção usando o teclado:

TAB para o controle

ESPAÇO para abrir a lista de seleção

Setas PARA CIMA ou PARA BAIXO para rolar até o item da lista desejado

ENTER para selecionar o item desejado

Somente em ENTER o evento onchange ou (JQuery .change ()) é acionado.

Embora eu pessoalmente não usasse um controle de formulário para menus simples, existem muitos aplicativos da Web que usam controles de formulário para alterar a apresentação da página (por exemplo, ordem de classificação.) Eles podem ser implementados pelo AJAX para carregar novo conteúdo no página, ou, em implementações mais antigas, acionando novos carregamentos de página, que é essencialmente um link de página.

IMHO, esses são usos válidos de um controle de formulário.

Rich Cloutier
fonte
3

A <select>tag cria uma lista suspensa. Você não pode colocar links html em uma lista suspensa.

No entanto, existem bibliotecas JavaScript que fornecem funcionalidade semelhante. Aqui está um exemplo: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

danben
fonte
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>
azkhawaja
fonte
Embora esse código possa responder à pergunta, fornecer um contexto adicional sobre como e / ou por que resolve o problema melhoraria o valor a longo prazo da resposta.
Rgmt 10/05
-7

Experimente 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>
Rakesh Chauhan
fonte