Curso de Programação em Javascript e HTML
204 pág.

Curso de Programação em Javascript e HTML


DisciplinaProgramação I20.542 materiais239.940 seguidores
Pré-visualização40 páginas
ou define um valor lógico (true ou false) que indica se a 
opção deve ser desativada ou se deve permanecer ativa
form Devolve o objeto form em que este está contido
index Devolve o índice da opção relativamente ao elemento que a 
contém
label Lê ou define o nome dado à opção
selected Faz com que a opção passe ou não (valores true ou false) a ser 
a que está selecionada
text Lê o texto correspondente à opção
value Lê ou define o valor da opção (atributo value)
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 169
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Cada uma das propriedades descritas mais acima corresponde a um atributo 
do elemento <option> em acordo com a linguagem HTML. 
Exemplos de Aplicação
Mostrar o texto correspondente à opção selecionada
<html>
<head>
 function formAction()
 {
 var x=document.forms.myForm.mySelect
 alert(x.options[x.selectedIndex].text)
 }
<title></title>
</head>
<body>
 <form name=&quot;myForm&quot;>
 <select name=&quot;mySelect&quot;>
 <option selected=&quot;selected&quot;>Papagaio</option>
 <option>Arara</option>
 <option>Ave do Paraíso</option>
 </select>
 <input onclick=&quot;formAction()&quot;
 type=&quot;button&quot; value=&quot;Mostrar o Texto da Opção Escolhida&quot;>
 </form>
</body>
</html>
Modificar o texto da opção
<html>
<head>
 function optionText()
 {
 var x=document.forms.myForm.mySelect
 x.options[x.selectedIndex].text=&quot;Vodka&quot;
 }
<title></title>
</head>
<body>
 <form name=&quot;myForm&quot;>
 <select name=&quot;mySelect&quot;>
 <option selected=&quot;selected&quot;>Água</option>
 <option>Refrigerante</option>
 <option>Leite</option>
 </select>
 <input onclick=&quot;optionText()&quot;
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 170
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
 type=&quot;button&quot; value=&quot;Alterar o Texto Selecionado&quot;>
 </form>
</body>
</html>
Mostrar o número correspondente à opção selecionada
<html>
<head>
 function optionIndex()
 {
 var x=document.forms.myForm.mySelect
 alert(x.options[x.selectedIndex].index)
 }
<title></title>
</head>
<body>
 <form name=&quot;myForm&quot;>
 <select name=&quot;mySelect&quot;>
 <option selected=&quot;selected&quot;>Canário</option>
 <option>Periquito</option>
 <option>Araro</option>
 </select>
 <input onclick=&quot;optionIndex()&quot; type=&quot;button&quot; value=&quot;Mostrar o Índice&quot;>
 </form>
</body>
</html>
11.12 Objeto select
Este objeto representa de forma completa os elementos criados com a etiqueta 
<select> do HTML. 
Propriedades
Propriedade Descrição
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 171
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
disabled Lê ou define o valor da propriedade disabled, que determina se 
a opção deve ser desativada ou se deve permanecer ativa
form Devolve o elemento form que contém o elemento
length Devolve o número de opções contidas dentro do elemento
multiple Define e permite saber se é possível selecionar várias opções 
em simultâneo
name Lê ou define o nome do elemento
selectedIndex Lê o número correspondente à opção selecionada
size Lê ou define o número de opções que podem ser vistas ao 
mesmo tempo
tabIndex Lê ou define o índice (número de ordem) do elemento que 
corresponde a este objeto no acesso através da tecla tab
type Lê o tipo (valor do atributo type) do elemento 
Cada uma das propriedades descritas mais acima corresponde a um atributo 
do elemento <select> em acordo com a linguagem HTML. 
Coleções
Coleção Descrição
options Contém uma lista com todas as opções contidas dentro do 
elemento (elementos <option>)
Métodos
Método Descrição
add() Acrescenta uma nova opção à coleção de opções
remove() Remove uma opção da coleção de opções
blur() O elemento perde o foco
focus() O elemento ganha o foco
Exemplos de Aplicação
Desativar e ativar um elemento select
<html>
<head>
 function makeDisable()
 {
 var x=document.forms.myForm.mySelect
 x.disabled=true
 }
 function makeEnable()
 {
 var x=document.forms.myForm.mySelect
 x.disabled=false
 }
<title></title>
</head>
<body>
 <form name=&quot;myForm&quot;>
 <select name=&quot;mySelect&quot;>
 <option selected=&quot;selected&quot;>Canário</option>
 <option>Periquito</option>
 <option>Arara</option>
 </select>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 172
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
 <input onclick=&quot;makeDisable()&quot; type=&quot;button&quot; value=&quot;Desativar a Lista&quot;>
 <input onclick=&quot;makeEnable()&quot; type=&quot;button&quot; value=&quot;Ativar a Lista&quot;>
 </form>
</body>
</html>
Ler o nome do formulário que contém o elemento select
<html>
<head>
 function formAction()
 {
 var x=document.forms.myForm.mySelect
 alert(x.form.name)
 }
<title></title>
</head>
<body>
 <form name=&quot;myForm&quot;>
 <select name=&quot;mySelect&quot;>
 <option selected=&quot;selected&quot;>Papagaio</option>
 <option>Arara</option>
 <option>Ave do Paraíso</option>
 </select>
 <input onclick=&quot;formAction()&quot;
 type=&quot;button&quot; value=&quot;Mostrar o Nome do Formulário&quot;>
 </form>
</body>
</html>
Mostrar o número de opções que estão no elemento select
<html>
<head>
 function formAction()
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 173
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
 {
 var x=document.forms.myForm.mySelect
 alert(x.length)
 }
<title></title>
</head>
<body>
 <form name=&quot;myForm&quot;>
 <select name=&quot;mySelect&quot;>
 <option selected=&quot;selected&quot;>Batata</option>
 <option>Feijão</option>
 <option>Mandioca</option>
 </select>
 <input onclick=&quot;formAction()&quot;
 type=&quot;button&quot; value=&quot;Qual é o Número de Opções?&quot;>
 </form>
</body>
</html>
Especificar o número de opções que podem ser vistas ao mesmo tempo
<html>
<head>
 function formAction()
 {
 var x=document.forms.myForm.mySelect
 x.size=&quot;2&quot;
 }
<title></title>
</head>
<body>
 <form name=&quot;myForm&quot;>
 <select name=&quot;mySelect&quot;>
 <option selected=&quot;selected&quot;>Cavalo</option>
 <option>Vaca</option>
 <option>Galo</option>
 </select>
 <input onclick=&quot;formAction()&quot; type=&quot;button&quot;
 value=&quot;Alterar Tamanho&quot;>
 (Pode não funcionar no Opera)
 </form>
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 174
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Selecionar várias opções ao mesmo tempo
<html>
<head>
 function formAction()
 {
 var x=document.forms.myForm.mySelect
 x.multiple=true
 }
<title></title>
</head>
<body>
 <p>
 Antes de clicar no botão que tem escrito
 &quot;Permitir Escolhas Múltiplas&quot; tente selecionar
 mais do que uma opção (para isso mantenha a
 tecla Ctrl ou Shift pressionada enquanto seleciona
 uma opção com o mouse.)
 </p>
 <p> Depois clique no botão
 &quot;Permitir Escolhas Múltiplas&quot; e tente novamente.
 </p>
 <form name=&quot;myForm&quot;>
 <select size=&quot;3&quot; name=&quot;mySelect&quot;>
 <option>Canário</option>
 <option>Periquito</option>
 <option>Arara</option>
 </select>
 <input onclick=&quot;formAction()&quot; type=&quot;button&quot;
 value=&quot;Permitir Escolhas Múltiplas&quot;>
 (Pode não funcionar no Opera)
 </form>
</body>
</html>
<meta
Carregar mais