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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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