É um objeto para entrada de opções, onde o usuário, a partir de uma
lista de alternativas, seleciona uma ou mais opções.
Suas principais propriedades são: name, size, value e multiple.
name : Especifica o nome do objeto
size : Especifica a quantidade de opções que aparecerão na tela
simultaneamente
value : Associa um valor ou string para cada opção (opcional)
multiple : Especifica a condição de múltipla escolha
(usando-se a tecla Ctrl)
Para utilização deste objeto é importante o conhecimento de outras propriedades associadas:
Objeto.length : Retorna a quantidade de opções existentes na
lista
Objeto.selectedindex : Retorna o "index" do objeto
selecionado (primeiro = 0) Objeto.options[index].text : retorna
o texto externo associado a cada opção Objeto.options[index].value
: retorna o texto interno (value) associado a cada opção Objeto.options[index].selected
: retorna verdadeiro ou falso
Os eventos associados a este objeto são: onchange, onblur e onfocus.
Ex1:
Neste exemplo é importante observar os seguintes aspectos:
a) A lista permite apenas uma seleção
b) A quarta opção aparecerá inicialmente selecionada (propriedade "selected")
c) Não utilizamos a propriedade "value". Assim, a propriedade
"text" e a propriedade "value"
passam a ter o mesmo valor, ou seja, o valor
externo que aparece na tela.
.
<script>
function Verselect(Campo) {
Icombo = Campo.selectedIndex
alert ("Voce escolheu " + Campo.options[Icombo].text) }
</script>
<p>
Objeto Select <select name="Combo1" size=1 onchange="Verselect(Combo1)">
<option>Opcao 1
<option>Opcao 2
<option>Opcao 3
<option selected>Opcao 4 (recomendada)
<option>Opcao 5
<option>Opcao 6
</select>
</p>
Ex2:
Neste exemplo é importante observar os seguintes aspectos:
a) A lista permite múltiplas seleções
b) Utilizamos a propriedade "value". Assim as propriedades
"text" e "value"
têm valores diferentes: text retornará Escolha 1 a Escolha 4 e value
retornará List1 a List4.
c) O parâmetro passado, quando da ocorrência do evento onblur, foi
this.
Esta diretiva significa que estamos passando este objeto.
.
<script>
function Vermult(Lista) {
var opcoes = ""
for (i = 0 ; i < Lista.length ; i++) {
if (Lista.options[i].selected) {
opcoes += (Lista.options[i].value + ", ") }
}
alert ("As opcoes escolhidas foram : " + opcoes) }
</script>
<p>
Objeto Select2 <select name="Combo2" size=4 multiple onblur="Vermult(this)">
<option value="List1">Escolha 1 </option>
<option value="List2">Escolha 2 </option>
<option value="List3">Escolha 3 </option>
<option value="List4">Escolha 4 </option>
</select>
</p>
Click Aqui para executar este exemplo