Tag HTML <option>

Definição e uso

<option> definiu opções na lista de seleção.

<option> o elemento <select>、<optgroup> ou <datalist> dentro do elemento.

Atenção:<option> a tag pode ser usada sem atributos, mas você geralmente precisa do atributo value, que indica o conteúdo a ser enviado para o servidor ao submeter o formulário.

Dica:Se você tiver uma lista longa de opções, você pode usar <optgroup> grupar opções relacionadas dentro da tag.

Veja também:

Manual de Referência do DOM HTML:Objeto Option

instância

exemplo 1

lista suspensa com quatro opções:

<label for="cars">Por favor, selecione uma marca de veículo:</label>
<select id="cars">
  <option value="audi">奥迪</option>
  <option value="byd">比亚迪</option>
  <option value="geely">吉利</option>
  <option value="volvo">沃尔沃</option>
</select>

Experimente você mesmo

exemplo 2

em <datalist> no elemento <option>：

<label for="browser">Por favor, selecione seu navegador da lista:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Experimente você mesmo

exemplo 3

em <optgroup> no elemento <option>：

<label for="cars">Por favor, selecione uma marca de veículo:</label>
<select id="cars">
  <optgroup label="中国车">
    <option value="byd">比亚迪</option>
    <option value="geely">吉利</option>
  </optgroup>
  <optgroup label="德国车">
    <option value="mercedes">奔驰</option>
    <option value="audi">奥迪</option>
  </optgroup>
</select>

Experimente você mesmo

Atributo

Atributo Valor Descrição
disabled disabled Define que a opção deve ser desativada.
label Texto Define um rótulo mais curto para a opção.
selected selected Define que uma opção deve ser pré-selecionada ao carregar a página.
value Texto Define o valor a ser enviado para o servidor.

Atributos globais

<option> A etiqueta também suporta Atributos globais no HTML.

Atributos de evento

<option> A etiqueta também suporta Atributos de evento no HTML.

Configurações CSS padrão

Nenhum.

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte