tutoriais mais recente desenvolvimento web
 

Selecione as opções Colecção

<Select Object

Exemplo

Descobrir quantas opções existem em uma lista drop-down específica:

var x = document.getElementById("mySelect").options.length;

O resultado x será:

4
Tente você mesmo "

Mais "Try it Yourself" exemplos abaixo.

Definição e Uso

A coleção de opções retorna uma coleção de todos os <option> elementos de uma lista drop-down.

Note: Os elementos na coleção são classificadas como eles aparecem no código-fonte.

Suporte navegador

Coleção
options sim sim sim sim sim

Sintaxe

selectObject .options

propriedades

Propriedade Descrição
length Retorna o número de <option> elementos na coleção.

Nota: Esta propriedade é somente leitura
selectedIndex Define ou retorna o índice do selecionado <option> elemento na coleção (starts at 0)

Métodos

Método Descrição
[ index ] Retorna o <option> elemento da coleção com o índice especificado (starts at 0) .

Nota: Retorna null se o número de índice está fora do intervalo
[ add( option [, index ]) ] Adiciona um <option> elemento na coleção no índice especificado. Se nenhum índice for especificado, ele insere a opção no final da coleção
item( index ) Retorna o <option> elemento da coleção com o índice especificado (starts at 0) .

Nota: Retorna null se o número de índice está fora do intervalo
namedItem( id ) Retorna o <option> elemento da coleção com o especificado id.

Nota: Retorna null se o id não existe
remove( index ) Remove o <option> elemento com o índice especificado da coleção

Detalhes técnicos

DOM Versão: Núcleo Nível Objeto 2 Documento
Valor de retorno: Um objeto HTMLOptionsCollection, representando todos <option> elementos no <select> elemento. Os elementos na coleção são classificadas como eles aparecem no código fonte
Exemplos

mais Exemplos

Exemplo

[Índice]

Obter o texto da primeira opção (index 0) em uma lista drop-down:

var x = document.getElementById("mySelect").options[0].text;

O resultado x será:

Apple
Tente você mesmo "

Exemplo

item( index )

Obter o texto da primeira opção (index 0) em uma lista drop-down:

var x = document.getElementById("mySelect").options.item(0).text;

O resultado x será:

Apple
Tente você mesmo "

Exemplo

namedItem( id )

Obter o texto da opção com id = "laranja" em uma lista drop-down:

var x = document.getElementById("mySelect").options.namedItem("orange").text;

O resultado x será:

Orange
Tente você mesmo "

Exemplo

Adicionar um "Kiwi" opção na posição de índice "1" em uma lista drop-down:

var x = document.getElementById("mySelect");
var c = document.createElement("option");
c.text = "Kiwi";
x.options.add(c, 1);
Tente você mesmo "

Exemplo

Remova a opção com o índice de "1" a partir de uma lista drop-down:

var x = document.getElementById("mySelect");
x.options.remove(1);
Tente você mesmo "

Exemplo

Loop através de todas as opções em uma lista drop-down, e a saída do texto de cada opção:

var x = document.getElementById("mySelect");
var txt = "";
var i;
for (i = 0; i < x.length; i++) {
    txt = txt + x.options[i].text + "<br>";
}

O resultado do txt será:

Apple
Orange
Pineapple
Banana
Tente você mesmo "

Exemplo

Escolha uma opção na lista drop-down e de saída o texto da opção selecionada em um elemento com id = "demonstração":

var x = document.getElementById("mySelect");
var i = x.selectedIndex;
document.getElementById("demo").innerHTML = x.options[i].text;

O resultado poderia ser:

Banana
Tente você mesmo "

Exemplo

Alterar as opções em uma lista drop-down, dependendo da opção selecionada em outra lista drop-down:

var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];

function ChangeCarList() {
    var carList = document.getElementById("car");
    var modelList = document.getElementById("carmodel");
    var selCar = carList.options[carList.selectedIndex].value;

    while (modelList.options.length) {
        modelList.remove(0);
    }

    var cars = carsAndModels[selCar];
    if (cars) {
        var i;
        for (i = 0; i < cars.length; i++) {
            var car = new Option(cars[i], i);
            modelList.options.add(car);
        }
    }
}
Tente você mesmo "
<Select Object