HTML SELECT em branco sem item em branco na lista suspensa

110

Como implementar subj?

quando eu escrevo:

<form>
  <select>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

então o item padrão selecionado é "aaaa"

quando eu escrevo:

<form>
  <select>
     <option value=""></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

então o item padrão selecionado fica em branco, mas este item em branco é apresentado no menu suspenso.

como posso implementar a marca SELECT com valor em branco padrão que está oculto na lista suspensa?

Nick Stavrogin
fonte
Possível duplicata da opção de seleção padrão como em branco
Blazemonger

Respostas:

182

Basta usar atributos desativados e / ou ocultos:

<option selected disabled hidden style='display: none' value=''></option>
  • selected torna esta opção a padrão.
  • disabled torna esta opção não clicável.
  • style='display: none'faz com que esta opção não seja exibida em navegadores mais antigos. Veja: Posso usar a documentação para o atributo oculto.
  • hidden faz com que essa opção não seja exibida na lista suspensa.
Eduardo
fonte
3
Na verdade, o IE 11 exibe a opção "oculto".
Edward Olamisan,
6
O Webkit não parece suportar o atributo 'oculto'
Ethan Reesor
2
Conforme mencionado em Posso usar , o hiddenatributo é eficaz display: none, para oferecer suporte a navegadores mais antigos:<option selected disabled hidden style='display: none' value=''></option>
Neta
66

Você pode definir selectedIndexpara -1usar .prop: http://jsfiddle.net/R9auG/ .

Para versões mais antigas do jQuery, use em .attrvez de .prop: http://jsfiddle.net/R9auG/71/ .

pimvdb
fonte
@IronicMuffin: Obrigado; acabei de testar e parece funcionar em todos os navegadores principais de fato.
pimvdb
@zobidafly: Obrigado pela edição; Elaborei um pouco.
pimvdb de
1
.attrirá falhar em novas versões do jQuery. Tentar ser inteligente me fez falhar.
Carson Ip
33

Simplesmente usando

<option value="" selected disabled>Please select an option...</option>

funcionará em qualquer lugar sem script e permitirá que você instrua o usuário ao mesmo tempo.

mvreijn
fonte
25
<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
Andrey R
fonte
1
ff / chrome - ok, opera / ie7-9 - não ok você pode testar isso aqui (com ou sem js): jsfiddle.net/R9auG/145, então eu recomendo js-approach de @pimvdb
tibalt
11

Aqui está uma maneira simples de fazer isso usando JavaScript simples. Este é o equivalente básico do script jQuery postado por pimvdb. Você pode testar aqui .

<script type='text/javascript'>
  window.onload = function(){
    document.getElementById('id_here').selectedIndex = -1;
  }
</script>

.

<select id="id_here">
  <option>aaaa</option>
  <option>bbbb</option>
</select>

Certifique-se de que o "id_here" corresponda no formulário e no JavaScript.

Mingwei Samuel
fonte
3

Você não pode. Eles simplesmente não funcionam dessa maneira. Um menu suspenso deve ter uma de suas opções selecionada o tempo todo.

Você pode (embora eu não recomende) observar um evento de mudança e, em seguida, usar JS para excluir a primeira opção se estiver em branco.

Quentin
fonte
3
Por que você não recomenda esse comportamento?
Josh Noe
Existem muitos casos em que você deseja que o usuário escolha ativamente algo em uma lista. Não acho que JS seja a maneira ideal de fazer isso (embora pareça ser a única maneira), mas eu realmente acho que deveria haver uma maneira.
qwerty
2

Para HTML puramente, @isherwood tem uma ótima solução. Para jQuery, dê ao menu suspenso de seleção um ID e selecione-o com jQuery:

<form>
  <select id="myDropDown">
    <option value="0">aaaa</option>
    <option value="1">bbbb</option>
  </select>
</form> 

Em seguida, use este jQuery para limpar o menu suspenso no carregamento da página:

$(document).ready(function() {
    $('#myDropDown').val(''); 
});

Ou coloque-o dentro de uma função por si só:

$('#myDropDown').val(''); 

realiza o que você está procurando e é fácil colocar isso em funções que podem ser chamadas em sua página se você precisar apagar o menu suspenso sem recarregar a página.

Jason Slobotski
fonte
0

Você pode tentar este trecho

$("#your-id")[0].selectedIndex = -1

Funcionou para mim

Shenbag
fonte
1
Seria melhor fornecer um jsfiddle.net para acompanhar a resposta a fim de fornecer uma explicação mais clara.
Anônimo
1
Isso pressupõe que o OP está usando jQuery.
evanrmurphy,