Option()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

O construtor Option() cria novos HTMLOptionElement.

Sintaxe

var optionElementReference = new Option(text, value, defaultSelected, selected);

Parâmetros

text Optional

Um DOMString representa o conteúdo do elemento, o texto mostrado na tela. Se o texto não é especificado, o texto padrão "" (texto vazio) é utilizado.

value Optional

Um DOMString representa o valor do HTMLOptionElement, i.e. o valor do elemento <option>. Se não especificado, o texto é usado como valor, e.g. o elemento <select> tem seu valor associado quando o formulário é submetido ao servidor.

defaultSelected Optional

Um Boolean é usado para adicionar o atributo selected, para que este <option> seja mostrado como selecionado no elemento <select> quando a página for carregada. Se não especificado, o estado padrão é não selecionado. Observe que o defaultSelected = true não define a opção como o valor selecionado do elemento <select>.

selected Optional

Um Boolean é usado para colocar elemento <option> no estado de selecionado; como padrão do elemento tem o estado de não selecionado. Se omitido, mesmo que o parâmetro defaultSelected for verdadeiro, o elemento <option> não é selecionado.

Exemplos

Adicionando novas tags options

js
/* assumindo que temos este HTML
<select id='s'>

</select>
*/

var s = document.getElementById("s");
var options = [Quatro, Cinco, Seis];

options.forEach(function (elemento, chave) {
  s.appendChild(new Option(elemento, chave));
});

/* Resultado
<select id='s'>
    <option value="0">Quatro</option>
    <option value="1">Cinco</option>
    <option value="2">Seis</option>
</select> */

Adicionando options com diferentes parâmetros

js
/* assumindo que temos este HTML
<select id="s">
    <option>Primeiro</option>
    <option>Segundo</option>
    <option>Terceiro</option>
</select>
*/

var s = document.getElementById("s");
var options = ["zero", "um", "dois"];

options.forEach(function (elemento, chave) {
  if (elemento == "zero") {
    s[s.options.length] = new Option(elemento, s.options.length, false, false);
  }
  if (elemento == "um") {
    s[s.options.length] = new Option(elemento, s.options.length, true, false); // Adicionando atributo "selected"
  }
  if (elemento == "dois") {
    s[s.options.length] = new Option(elemento, s.options.length, false, true); // Apenas irá selecionar a opção na visualização
  }
});

/* Resultado
<select id="s">
  <option value="0">zero</option>
  <option value="1" selected="">um</option>
  <option value="2">dois</option> // O usuário verá esta opção selecionada
</select>
*/

Especificações

Specification
HTML
# dom-option-dev

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Option() constructor

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support