Como posso definir o valor padrão para um elemento HTML <select>?


1459

Eu pensei que a adição de um "value"conjunto de atributos no <select>elemento abaixo faria com que o <option>conteúdo fornecido "value"fosse selecionado por padrão:

<select name="hall" id="hall" value="3">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

No entanto, isso não funcionou como eu esperava. Como posso definir qual <option>elemento é selecionado por padrão?


Uau, esta pergunta é tão útil e literalmente viralizou haha
finnmglas

Respostas:


2152

Defina selected="selected"a opção que você deseja que seja o padrão.

<option selected="selected">
3
</option>

19
<option value = "3" selected = "selected"> 3 </option> O valor será passado como uma string quando a opção 3 for selecionada.
perfil completo de Sree Rama

5
E continue usando o atributo id para <Select> e não é bom usar o atributo value para o elemento <select> html.
precisa

216
A parte = "selecionada" não é necessária. Apenas <opção selecionada> fará o que foi mencionado em outras respostas.
mindjuice

56
@MindJuice O que eu escrevi é válido em HTML / XML poliglota. Usar <opção selecionada> é bom para um navegador, mas pode fazer com que o documento seja rejeitado por outros analisadores. Acho útil poder usar o XPath / XSLT em documentos da Web ocasionalmente.
Borealid

70
Se você estiver usando Angular, observe que ng-modelsubstitui o valor selecionado padrão (mesmo que indefinido, se você não definiu o objeto vinculado). Demorei um pouco para descobrir que era por isso que a selected="selected"opção não foi selecionada.
Metakermit 17/07/2015

626

Caso você queira ter um texto padrão como uma espécie de espaço reservado / dica, mas não considerado um valor válido (algo como "complete aqui", "selecione sua nação" ecc.), Você pode fazer algo assim:

<select>
  <option value="" selected disabled hidden>Choose here</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>


61
Eu acho que é isso que a maioria das pessoas está procurando. Boa resposta.
Chrisallick

1
Era um arquivo js externo, onde o css era apenas necessário para não aparecer ao longo da borda da tela. Depois de alguns meses, ele foi editado para um trecho de código embutido e o cara que editou simplesmente o manteve no exemplo. Você pode editá-lo e removê-lo do snippet, se realmente o incomodar.
Nobita

Uma solução ainda melhor é usar o hiddenatributo. Veja a resposta de @ chong-lip-phang abaixo: stackoverflow.com/a/39358987/1192426
Ivan Akulov

<option value="" selected disabled hidden>Choose here</option>

1
Resposta incrível!
japes Sophey 17/02

234

Exemplo completo:

<select name="hall" id="hall"> 
  <option> 
    1 
  </option> 
  <option> 
    2 
  </option> 
  <option selected> 
    3 
  </option> 
  <option> 
    4 
  </option> 
  <option> 
    5 
  </option> 
</select> 


11
Isso é mais simples do que usar selected = "selected".
Rodrigo Rodrigo

57
selected = "selected" deve funcionar para todos os doctypes. XHTML não gosta de atributos sem valores.
Ps2goat

14
@Rodrigo É realmente difícil escrever selected="selected"? Quero dizer, o que você está salvando? Tempo? Tamanho? É insignificante e se torna o código mais "compatível", por que não fazê-lo ?
XDaizu

15
@ DanielParejoMuñoz, ok, é insignificante. Mas se meu doctype é html, e não xhtml, por que desperdiçar algum byte?
Rodrigo

5
selected = "selected" parece um erro. Em alguns meses, eu provavelmente mudaria para selected = "3", pensando que isso significa que o item 3 está selecionado. (e quebre minha página)
Paul McCarthy

92

Me deparei com essa pergunta, mas a resposta aceita e altamente votada não funcionou para mim. Acontece que, se você estiver usando o React, a configuração selectednão funcionará.

Em vez disso, você deve definir um valor na <select>tag diretamente, como mostrado abaixo:

<select value="B">
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

Leia mais sobre o porquê aqui na página React .


2
Você pode definir uma opção pré-selecionada em uma lista suspensa usando o valueatributo da <select>tag, ou seja <select value="3">, mas não é válido no validador W3C.
Apóstolo

4
Certo, mas isso não é HTML, é JSX, portanto não precisa seguir as regras do W3C. O HTML gerado pelo React no final é válido.
mindjuice

Em um mundo perfeito, isso foi um comentário à pergunta, pois não é uma resposta válida. Mas acho que tem valor suficiente para ficar por aqui.
Justus Romijn

2
Eu precisava de uma solução semelhante à sugestão acima, mas com JQuery em vez de React. Caso isso ajude alguém no futuro:$("select").each(function(){ $(this).find('option[value="'+$(this).attr("value")+'"]').prop('selected', true); });
CDK

Esta resposta não é válida, a questão subjacente está falando sobre HTML, não React (JSX).
Aaron C

72

Você pode fazer assim:

<select name="hall" id="hall">
    <option> 1 </option>
    <option> 2 </option>
    <option selected> 3 </option>
    <option> 4 </option>
    <option> 5 </option>
</select> 

Forneça a palavra-chave "selecionada" dentro da tag de opção, que você deseja que apareça por padrão na sua lista suspensa.

Ou você também pode fornecer atributo para a tag de opção, ou seja,

<option selected="selected">3</option>

13
Só para ficar claro, o padrão w3 é <option selected = "selected"> 3 </ option>
htmldrum

40
@JRM Acho que o que você quer dizer é que, para que seu documento seja compatível com XHTML, um atributo deve ter um valor aa. Em HTML, não há necessidade de "selected = selected". Os exemplos em w3.org/wiki/HTML/Elements/select , developer.mozilla.org/en-US/docs/HTML/Element/select não especificam um valor. O importante a ser observado é que isso selected="false"não é permitido e selected=""também faz com que seja selecionado. A única maneira de fazer uma opção não selecionada é remover o atributo. w3.org/html/wg/drafts/html/master/…
Juan Mendes

3
Eu nunca entendo como perguntas como essa são aprovadas. Eles são exatamente como a resposta correta ainda .. 2 anos mais tarde lol
Phil

51

se você quiser usar os valores de um formulário e mantê-lo dinâmico, tente isso com php

<form action="../<SamePage>/" method="post">


<?php
    $selected = $_POST['select'];
?>

<select name="select" size="1">

  <option <?php if($selected == '1'){echo("selected");}?>>1</option>
  <option <?php if($selected == '2'){echo("selected");}?>>2</option>

</select>
</form>

40

Eu prefiro isso:

<select>
   <option selected hidden>Choose here</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
   <option value="4">Four</option>
   <option value="5">Five</option>
</select>

'Escolha aqui' desaparece após a seleção de uma opção.


1
Eu tentei isso, mas "Escolha aqui" não é exibido. A primeira opção é vazio
Bogdan Mates

Qual navegador você está usando?
Chong Lip Phang

Estou usando a versão do navegador Google Chrome 52.0.2743.116 m
Bogdan Mates

2
Também estou usando esse navegador e não tenho nenhum problema.
Chong Lip Phang

2
Considere adicionar value=""para garantir que você obtenha um valor vazio.
21716 Ryan Walton

31

Uma melhoria para a resposta de nobita . Além disso, você pode melhorar a exibição visual da lista suspensa ocultando o elemento 'Escolha aqui'.

<select>
  <option selected disabled hidden>Choose here</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>


25

Melhor maneira na minha opinião:

<select>
   <option value="" selected="selected" hidden="hidden">Choose here</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
   <option value="4">Four</option>
   <option value="5">Five</option>
</select>

Por que não desativado?

Quando você usa o atributo desabilitado junto com o <button type="reset">Reset</button>valor, não é redefinido para o espaço reservado original. Em vez disso, o navegador escolhe a opção primeiro não desativada, que pode causar erros do usuário.

Valor vazio padrão

Cada formulário de produção tem validação, então o valor vazio não deve ser um problema. Dessa forma, podemos ter uma seleção vazia e não obrigatória.

Atributos de sintaxe XHTML

selected="selected"sintaxe é a única maneira de ser compatível com XHTML e HTML 5. É a sintaxe XML correta e alguns editores podem ficar felizes com isso. É mais compatível com versões anteriores. Não tenho um forte pressentimento sobre isso, mas se os argumentos acima mencionados são seus requisitos, você deve seguir a sintaxe completa.


Isso esconde toda a opção para mim
ADEL NAMANI 04/01

@ADELNAMANI Você poderia fornecer o link para o seu código? Acho que seu problema não está relacionado à minha resposta.
Michał Mielec

19

Outro exemplo; usando JavaScript para definir uma opção selecionada.

(Você pode usar este exemplo para fazer um loop de uma matriz de valores em um componente suspenso)

<select id="yourDropDownElementId"><select/>

// Get the select element
var select = document.getElementById("yourDropDownElementId");
// Create a new option element
var el = document.createElement("option");
// Add our value to the option
el.textContent = "Example Value";
el.value = "Example Value";
// Set the option to selected
el.selected = true;
// Add the new option element to the select element
select.appendChild(el);

isso não deveria estar el.selected = "selected";em conformidade com o padrão w3?
7284

5
@ 7yl4r No. selectedé uma propriedade booleana, conforme definida por w3c - w3.org/TR/html401/interact/forms.html `17.6.1 Opções pré-selecionadas selecionadas [CI] - Quando definido, este atributo booleano especifica que esta opção é pré-selected.` Para mais informações sobre as escolas do W3C uso See - w3schools.com/jsref/prop_option_selected.asp
Ally

14

O atributo selecionado é um atributo booleano.

Quando presente, especifica que uma opção deve ser pré-selecionada quando a página carregar.

A opção pré-selecionada será exibida primeiro na lista suspensa.

<select>
  <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="vw">VW</option>
 <option value="audi" selected>Audi</option> 
</select> 

10

Se você estiver reagindo, poderá usar defaultValuecomo atributo em vez de valuena tag select.


7

Se você estiver usando select com angular 1, precisará usar ng-init, caso contrário, a segunda opção não será selecionada, pois o modelo ng substitui o valor selecionado padrão

<select ng-model="sortVar" ng-init='sortVar="stargazers_count"'>
  <option value="name">Name</option>
  <option selected="selected" value="stargazers_count">Stars</option>
  <option value="language">Language</option>
</select>

4

Eu usei essa função php para gerar as opções e inseri-la no meu HTML

<?php
  # code to output a set of options for a numeric drop down list
  # parameters: (start, end, step, format, default)
  function numericoptions($start, $end, $step, $formatstring, $default)
  {
    $retstring = "";
    for($i = $start; $i <= $end; $i = $i + $step)
    {
      $retstring = $retstring . '<OPTION ';
      $retstring = $retstring . 'value="' . sprintf($formatstring,$i) . '"';
      if($default == $i)
      {
        $retstring = $retstring . ' selected="selected"';
      }
      $retstring = $retstring . '>' . sprintf($formatstring,$i) . '</OPTION> ';
    }

  return $retstring;
  }

?>

E então, no código da minha página da Web, eu o uso como abaixo;

<select id="endmin" name="endmin">
  <?php echo numericoptions(0,55,5,'%02d',$endmin); ?>
</select>

Se $ endmin for criado a partir de uma variável _POST toda vez que a página for carregada (e esse código estiver dentro de um formulário que for postado), o valor selecionado anteriormente será selecionado por padrão.


4

O atributo value da tag está ausente, portanto, não é exibido como você deseja selecionado. Por padrão, a primeira opção é exibida no carregamento da página suspensa, se o atributo value estiver definido na tag .... Eu resolvi meu problema dessa maneira


4

Este código define o valor padrão para o elemento de seleção HTML com PHP.

<select name="hall" id="hall">
<?php
    $default = 3;
    $nr = 1;
    while($nr < 10){
        if($nr == $default){
            echo "<option selected=\"selected\">". $nr ."</option>";
        }
        else{
            echo "<option>". $nr ."</option>";
        }
        $nr++;
    }
?>
</select>

3

Você pode usar:

<option value="someValue" selected>Some Value</option>

ao invés de,

<option value="someValue" selected = "selected">Some Value</option>

ambos estão igualmente corretos.


3

Simplesmente tornaria a primeira opção de seleção o valor padrão e apenas ocultaria esse valor no menu suspenso com o novo recurso "oculto" do HTML5. Como isso:

   <select name="" id="">
     <option hidden value="default">Select An Option</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
     <option value="4">Four</option>
   </select>

2

Eu mesmo uso

<select selected=''>
    <option value=''></option>
    <option value='1'>ccc</option>
    <option value='2'>xxx</option>
    <option value='3'>zzz</option>
    <option value='4'>aaa</option>
    <option value='5'>qqq</option>
    <option value='6'>wwww</option>
</select>

2

Você só precisa colocar o atributo "selecionado" em uma opção específica e, em vez disso, direcionar para selecionar o elemento.

Aqui está um snippet para o mesmo e vários exemplos de trabalho com valores diferentes.

   Select Option 3 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option>2</option>
    <option selected="selected">3</option>
    <option>4</option>
    <option>5</option>
   </select>
   
   <br/>
   <br/>
   <br/>
   Select Option 5 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option selected="selected">5</option>
   </select>
   
    <br/>
   <br/>
   <br/>
   Select Option 2 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option selected="selected">2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
   </select>


2

Defina selected = "selected" onde o valor da opção é 3

veja abaixo o exemplo

<option selected="selected" value="3" >3</option>

No Firefox, ele não funciona no recarregamento da página
Sebastian

no meu sistema seu trabalho no firefox
Akbor 26/03

1

O problema <select>é que, às vezes, ele é desconectado com o estado do que é renderizado atualmente e, a menos que algo tenha sido alterado na lista de opções, nenhum valor de alteração é retornado. Isso pode ser um problema ao tentar selecionar a primeira opção de uma lista. O código a seguir pode obter a primeira opção selecionada pela primeira vez, mas onchange="changeFontSize(this)"por si próprio não. Existem métodos descritos acima, usando uma opção fictícia para forçar um usuário a fazer um valor de alteração para selecionar o primeiro valor real, como iniciar a lista com um valor vazio. Nota: o onclick chamaria a função duas vezes, o código a seguir não, mas resolve o problema inicial.

<label>Font Size</label>
<select name="fontSize" id="fontSize" onfocus="changeFontSize(this)" onchange="changeFontSize(this)">           
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
    <option value="extraLarge">Extra large</option>
</select>

<script>
function changeFontSize(x){
    body=document.getElementById('body');
    if (x.value=="extraLarge") {
        body.style.fontSize="25px";
    } else {
        body.style.fontSize=x.value;
    }
}
</script>

1

Eu uso Angular e defino a opção padrão por

Modelo HTML

<select #selectConnection [(ngModel)]="selectedVal" class="form-control  col-sm-6 "  max-width="100px"   title="Select" 
      data-size="10"> 
        <option  >test1</option>
        <option >test2</option>      
      </select>

Roteiro:

sselectedVal:any="test1";

0

Foi assim que eu fiz ...

<form action="../<SamePage>/" method="post">

<?php
    if ( $_POST['drop_down'] == "")
    {
    $selected = "";
    }
    else
    {
    $selected = "selected";
    }
?>

<select name="select" size="1">

  <option value="1" <?php $selected ?>>One</option>
     ////////  OR  ////////
  <option value="2" $selected>Two</option>

</select>
</form>

4
Parece haver alguma incongruência nessa solução. Se o nome do elemento for "select", a chave da variável $ _POST não deve ser "select" - de onde vem o "drop_down"? Além disso, supondo que houve um erro, e isso está realmente verificando a variável $ _POST ['select'] quanto a um valor, qualquer valor não vazio retornará true e, portanto, todos os itens <option> serão marcados como "selecionados". Talvez eu esteja perdendo algo essencial para esta resposta?
27713 Ryan

0

Você pode tentar assim

  <select name="hall" id="hall">
      <option>1</option>
      <option>2</option>
      <option selected="selected">3</option>
      <option>4</option>
      <option>5</option>
    </select>

0

Fragmento HTML:

<select data-selected="public" class="form-control" name="role">
    <option value="public">
        Pubblica
    </option>
    <option value="user">
        Utenti
    </option>
    <option value="admin">
        Admin
    </option>
</select>

Snippet JavaScript nativo:

document.querySelectorAll('[data-selected]').forEach(e => {
   e.value = e.dataset.selected
});

0
Upstream System:
<select name=upstream id=upstream>
<option value="SYBASE">SYBASE ASE
<option value="SYBASE_IQ">SYBASE_IQ
<option value="SQLSERVER">SQLSERVER
</select>
<script>
var obj=document.getElementById("upstream");
for (var i=0;i<obj.length;i++){if(obj.options[i].value==="SYBASE_IQ")obj.selectedIndex=i;}
</script>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.