458

Eu tenho um requisito muito estranho, no qual sou obrigado a não ter nenhuma opção selecionada por padrão no menu suspenso em HTML. Contudo,

Eu não posso usar isso,

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Expandir snippet

Porque, para isso, terei que fazer a validação para lidar com a primeira opção. Alguém pode me ajudar a atingir esse objetivo sem incluir a primeira opção como parte da tag select?

html Pankaj Parashar
fonte

2

Até onde eu sei, essa é a única maneira de obter uma linha em branco. Como assim, você terá que fazer a validação? Basta marcar uma verificação para dizer se value = "" e retornar false.

Robert

1

Essa seria uma boa oportunidade para usar botões de opção em vez de um menu suspenso.

Blazemonger 27/10/2015

9

Não é um requisito estranho, na minha opinião. Eu estou no mesmo barco. Também preciso de um padrão 'sem opção'. Tenho várias listas suspensas que não são necessárias para enviar um formulário. Desativá-los dessa maneira impede que o usuário precise fazer uma seleção quando não for pertinente. Boa pergunta! 1

Scott

Não é um requisito estranho, se o SELECT tinha um atributo obrigatório em seguida, ter uma opção de rótulo espaço reservado é uma exigência do HTML5 dev.w3.org/html5/spec-preview/...

Testo Testini

Os botões de opção @Blazemonger são uma péssima idéia se você tiver mais de 3 ou 4. Imagine uma lista suspensa com mais de 15 opções ou 50 ou mais? Aqueles têm os seus próprios problemas de design em muitos casos, mas a questão ainda está de pé que os botões de rádio não escala bem em tudo .

TylerH

1015

Talvez isso seja útil

<select>
    <option disabled selected value> -- select an option -- </option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

-- select an option --Será exibido por padrão. Mas se você escolher uma opção, não poderá selecioná-la novamente.

Você também pode ocultá-lo usando adicionando um option

<option style="display:none">

para que não apareça mais na lista.

opção 2

Se você não deseja escrever CSS e espera o mesmo comportamento da solução acima, basta usar:

<option hidden disabled selected value> -- select an option -- </option>

Estratégia
fonte

15

Aqui está um JSFiddle acima , caso alguém precise.

Uwe Keim

26

@azerafati como @Rafael_Mori apontou, você pode arquivar o mesmo usando o atributo "hidden", portanto, não é necessário CSS. Apenas HTML5 puro;)<option hidden disabled selected value> -- select an option -- </option>

BrainOverflow 26/03

E se eu quiser poder selecioná-lo novamente? Só não quero que envie nada. É possível?

Michael Rogers

1

adicionar um atributo oculto ao elemento option fez a mágica para mim! não esperava que fosse assim tão fácil. obrigado

S. Domeng

Esteja ciente de que o atributo oculto e o estilo de exibição não funcionam no IE, mesmo 11. stackoverflow.com/questions/58862242/…

yatskovsky

113

Você pode usar o Javascript para conseguir isso. Tente o seguinte código:

HTML

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select>

JS

document.getElementById("myDropdown").selectedIndex = -1;

ou JQuery

$("#myDropdown").prop("selectedIndex", -1);

Matschie
fonte

Esta solução funciona parcialmente com o Chrome 35: o menu suspenso não mostra nenhuma seleção quando a lista de opções está invisível, mas mostra a primeira opção selecionada quando a lista de opções fica visível. O Safari 7 se comporta como o esperado.

Flochtililoch 7/07

O interessante é: isso funciona com a validação de formulário HTML. Se você usar o requiredatributo no selectelemento e enviar sem selecionar uma opção, a validação do formulário falhará e informará, você deve fazer uma seleção. Portanto, eu realmente gosto dessa abordagem. (Pelo menos testado no Chrome)

Andreas Linnert

Não funciona (pelo menos nos navegadores atuais como esta escrito - e desnecessariamente se baseia em javascript.

silentmouth

1

A partir de 2019, única Safari IOS 10 se recusa a jogar bola com este

Ayyash

36

Hoje (25-02-2015)

Este é o HTML5 válido e envia um espaço em branco (não um espaço) ao servidor:

<option label=" "></option>

Validade verificada em http://validator.w3.org/check

Comportamento verificado com Win7 (IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10 (Chrome40, FF35) OSX_Yosemite (Safari8, Chrome40) Android (Samsung-Galaxy-S5)

O seguinte também passa na validação hoje , mas também passa algum tipo de caractere de espaço no servidor da maioria dos navegadores (provavelmente não desejável) e um espaço em branco nos outros (Chrome40 / Linux passa um espaço em branco):

<option>&#160;</option>

Anteriormente (02/08/2013)

De acordo com minhas anotações, a entidade sem espaço de quebra dentro das tags de opção mostradas acima produziu o seguinte erro em 2013:

Erro: Serviço de validação de marcação do W3C (público): o primeiro elemento de opção filho de um elemento de seleção com um atributo requerido e sem um atributo múltiplo e cujo tamanho é 1, deve ter um atributo de valor vazio ou não deve ter conteúdo de texto.

Naquele momento, um espaço regular era XHTML4 válido e enviava um espaço em branco (não um espaço) ao servidor de todos os navegadores:

<option> </option>

Futuro

Ficaria feliz se a especificação fosse atualizada para permitir explicitamente uma opção em branco. De preferência, usando a sintaxe mais breve. Qualquer um dos seguintes seria ótimo:

<option />
<option></option>

Arquivo de teste

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
</head>
<body>
  <form action="index.html" method="post">
    <select name="sel">
      <option label=" "></option>
    </select>
  </form>
</body>
</html>

GlenPeterson
fonte

15

<td><b>Ação da atividade:</b><br>
	<select style='align:left; width:100%;' id='cbxTipoSFA' name='cbxTipoSFA'>
	<option hidden selected>Selecione uma opção</option>
	<option value='Instalação'>Instalação</option>
	<option value='Solicitação'>Solicitação</option>
	<option value='Retirada'>Retirada</option></select>
</td>

Expandir snippet

Basta colocar "oculto" na opção que você deseja ocultar na lista suspensa.

Rafael Mori
fonte

8

Solução que funciona usando apenas CSS:

A: CSS embutido

<select>
    <option style="display:none;"></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Expandir snippet

B: Folha de estilos CSS

Se você tiver um arquivo CSS em mãos, poderá segmentar o primeiro optionusando:

select.first-opt-hidden option:first-of-type {
  display:none;
}

<select class="first-opt-hidden">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Expandir snippet

Kai Noack
fonte

4

Isso deve ajudar:

https://www.w3schools.com/tags/att_select_required.asp

 <form>
 <select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="submit">Submit</button>
</form>

Expandir snippet

Rohan Parab
fonte

Essa é a maneira mais moderna (html5) de atingir esse requisito; saiba que isso requer um botão type = submit. Um botão type = com um manipulador de envio onclick não exige automaticamente que o usuário faça uma seleção.

Arjan

3

<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Você pode evitar a validação personalizada neste caso.

Fawaz
fonte

2

Apenas uma pequena observação:

alguns navegadores Safari parecem não respeitar nem o atributo "oculto" nem a configuração de estilo "display: none" (testado com o Safari 12.1 no MacOS 10.12.6). Sem um texto de espaço reservado explícito, esses navegadores simplesmente mostram uma primeira linha vazia na lista de opções. Portanto, pode ser útil sempre fornecer algum texto explicativo para esta entrada "fictícia":

<option hidden disabled selected value>(select an option)</option>

Graças ao atributo "disabled", ele não será selecionado ativamente.

Andreas Rozek
fonte

1

Entendo o que você está tentando fazer. A melhor e a maneira mais bem-sucedida é:

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>

Guryash Singh
fonte

1

Achei muito interessante, porque experimentei a mesma coisa há pouco tempo. No entanto, me deparei com um exemplo na Internet sobre a solução a esse respeito.

Sem mais delongas, veja o fragmento de código abaixo:

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 3</option>
</select>

Com isso, ele permanecerá inviável, mas selecionável a qualquer momento. Mais conveniência para a interface do usuário e excelente para a experiência do usuário.

Bem, isso é tudo, espero que ajude. Felicidades!

farisfath25
fonte

Tornando-o incapaz de enviar, mas também chamar a atenção do usuário para a lista suspensa parece redundante, mas eu gosto da sugestão

Iofacture

@ lofacture: obrigado pela contribuição. na verdade, o código que escrevi era o que eu queria, mas sim, como você disse, depende das necessidades do usuário / proprietário

farisfath25 em 19/02/19

0

Não há solução HTML. Pela especificação do HTML 4.01, o comportamento do navegador é indefinido se nenhum dos optionelementos tiver o selectedatributo, e o que os navegadores fazem na prática é que eles fazem a primeira opção pré-selecionada.

Como solução alternativa, você pode substituir o selectelemento por um conjunto de input type=radioelementos (com o mesmo nameatributo). Isso cria um controle do mesmo tipo, embora com aparência e interface de usuário diferentes. Se nenhum dos input type=radioelementos tiver o checkedatributo, nenhum deles será selecionado inicialmente na maioria dos navegadores modernos.

Jukka K. Korpela
fonte

0

Estou usando o framework Laravel 5 e a resposta do @Gambi também funcionou para mim, mas com algumas alterações no meu projeto.

Eu tenho os valores das opções em uma tabela de banco de dados e os uso com uma instrução foreach. Mas antes da declaração, adicionei uma opção com as configurações sugeridas pelo @Gambit e funcionou.

Aqui meu exemplo:

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset

Espero que isso ajude alguém também. Mantenha o bom trabalho!

LOG Oracle
fonte

0

Tente o seguinte:

<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>

A primeira opção no menu suspenso ficaria em branco.

Abhijit pai
fonte

0

Para exibir , selecione um valor no menu suspenso e oculte-o após a seleção de algum valor. por favor use o código abaixo.

também suportará a validação necessária.

<select class="form-control" required>
<option disabled selected value style="display:none;">--Please select a value</option>
              <option >Data 1</option>
              <option >Data 2</option>
              <option >Data 3</option>
</select>

Expandir snippet

Bathri Nathan
fonte

0

Se você estiver usando Angular (2+), (ou qualquer outra estrutura), poderá adicionar alguma lógica. A lógica seria: exibir apenas uma opção vazia se o usuário ainda não tiver selecionado nenhuma outra. Então, depois que o usuário selecionou uma opção, a opção vazia desaparece.

Para Angular (9), seria algo assim:

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>

Mike de Klerk
fonte

-2

Tente o seguinte:

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

Valida em HTML5. Funciona com o requiredatributo no elemento select. Pode ser re-selecionado. Funciona no Google Chrome 45, Internet Explorer 11, Edge, Firefox 41.

Tristan Bailey
fonte

opção de seleção padrão em branco

Respostas:

Hoje (25-02-2015)

Anteriormente (02/08/2013)

Futuro

Arquivo de teste