O objeto select de um formulário é uma dessas listas dinâmicas que nos permitem selecionar um elemento. Desdobram-se apertando sobre uma seta, a seguir pode-se escolher um elemento e para acabar voltam a se dobrarem. Pode-se ver um elemento select de um formulário a seguir.

Um destes elementos pode ser obtido utilizando a etiqueta <SELECT> dentro de um formulário. Podemos acrescentar à etiqueta um atributo para lhe dar o nome, NAME, para logo acessar a esse campo mediante Javascript. Para expressar cada uma das possíveis opções do campo select utilizamos uma etiqueta <OPTION> a qual lhe introduzimos um atributo VALUE para expressar seu valor. O texto que colocamos depois da etiqueta <OPTION> serve como etiqueta dessa opção, é o texto que vê o usuário associado a essa opção.

Propriedades do objeto select

Vamos ver uma lista das propriedades deste elemento de formulário.

length

Salva a quantidade de opções do campo select. Quantidade de etiquetas <OPTION>

Option

Faz referência a cada uma das suas opções. São por si mesmas objetos.

options

Um array com cada uma das opções do select.

selectedIndex

É o índice da opção que se encontra selecionada.

A parte das conhecidas propriedades comuns a todos os elementos de formulário: form e name e type.

Métodos do objeto select

Os métodos são somente 2 e já conhecemos seu significado.

blur()

Para retirar o foco da aplicação desse elemento de formulário.

focus()

Para colocar o foco da aplicação.

Objeto option

Temos que pararmos para ver também este objeto para entender melhor o campo select. Lembramos que as option são as distintas opções que tem um select, expressadas com a etiqueta <OPTION>.

Propriedades de option

Estes objetos só têm propriedades, não têm métodos. Vamos vê-las.

defaultSelected

Indica com um true ou um false se essa opção é a padrão. A opção padrão se consegue com HTML colocando o atributo selected a um option.

index

O índice dessa opção dentro do select.

selected

Indica se essa opção se encontra selecionada ou não.

text

É o texto da opção. O que o usuário pode ver no select, que se escreve depois da etiqueta <OPTION>.

value

Indica o valor da opção, que se introduz com o atributo VALUE da etiqueta <OPTION>.

Exemplo de aceso a um select

Vamos ver um exemplo sobre como se acessa a um select com Javascript, como podemos acessar suas diferentes propriedades e à opção selecionada.

Vamos começar vendo o formulário que tem o select com o qual vamos trabalhar. É um select que serve para valorizar o web que estamos visitando:

<form name="fomul">
Valoracao sobre este web:
<select name="minhaSelect">
<option value="10">Muito bom
<option value="5" selected>Regular
<option value="0">Muito ruim
</select>
<br>
<br>
<input type=button value="Digame propriedades" onclick="digamePropriedades()">
</form>

Agora vamos ver uma função que percorre as propriedades mais significativas do campo select e as apresenta em uma caixa alert.

function digamePropriedades(){
    var texto
    texto = "O número de opções do select: " + document.formul.minhaSelect.length
    var indice = document.formul.minhaSelect.selectedIndex
    texto += "\nIndice da opção escolhida: " + indice
    var valor = document.formul.minhaSelect.options[indice].value
    texto += "\nValor da opção escolhida: " + valor
    var textoEscolhido = document.formul.minhaSelect.options[indice].text
    texto += "\nTexto da opção escolhida: " + textoEscolhido
    alert(texto)
}

Esta função cria uma variável de texto onde vai introduzindo cada uma das propriedades do select. A primeira, contem o valor da propriedade length do select, a segunda, o índice da opção selecionada e as duas seguintes, contém o valor e o texto da opção selecionada. Para acessar à opção selecionada utilizamos o array options com o índice percorrido na segunda variável.

Propriedade value de um objeto select

Para acessar ao valor selecionado de um campo select podemos utilizar a propriedade value do campo select no lugar de acessar a partir do vector de options.

Para o anterior formulário seria algo parecido a isto:

formul.minhaSelect.value

Entretanto, esta propriedade só está presente em navegadores Internet Explorer, portanto é recomendável acessar utilizando o vetor de options com o índice da posição selecionada se desejarmos que a página seja compatível com todos os navegadores. Quisemos acrescentar este ponto para que, se alguma vez utilizarmos ou vermos utilizar este método de acesso, sabemos seu problema e porque é melhor utilizar o vetor de options.