El objeto select representa la etiqueta <select> de HTML y el objeto option a la etiqueta <option>
Propiedades del objeto select
| Propiedad | Significado |
|---|---|
| form | Referencia al formulario que contiene al objeto. |
| length | Mantiene el número de opciones definidas en el elemento select |
| name | Mantiene el valor del atributo name (nombre asignado al elemento select) |
| options | Array que mantiene una entrada por cada opción del elemento select, en el mismo orden en el que aparecen en el código HTML. Este atributo tiene además las propiedades descritas en el objeto option. |
| selectedIndex | Mantiene el valor del índice de la opción actualmente seleccionada (o el valor del índice de la primera opción marcada si se han seleccionado varias opciones). |
| type | Mantiene el valor del atributo type. |
Métodos del objeto select
| Método | Significado |
|---|---|
| blur() | Elimina el foco del objeto select. |
| focus() | Asigna el foco al objeto select. |
Eventos del objeto select
| Evento | Significado |
|---|---|
| onBlur | El evento se produce al perder el foco |
| onChange | El evento se produce cuando se pierde el foco después de haber sido alterado |
| onFocus | El evento se produce al obtener el foco |
Constructor del objeto option
new Option([texto[, valor[, seleccionDefecto[, seleccion]]]])texto que se visualiza en la lista
valor que se almacena en la opción sin visualizarse
seleccionDefecto cuando es true representa el elemento seleccionado por defecto
seleccion representa los elementos seleccionados en un select múltiple
Propiedades del objeto option
| Propiedad | Significado |
|---|---|
| defaultSelected | Indica si la opción debe estar seleccionada por defecto. |
| selected | Indica si la opción está seleccionada o no. |
| text | Mantiene el texto de la opción. |
| value | Mantiene el valor del atributo value de la opción (valor que se envía asociado al elemento option cuando se manda el formulario al servidor). |
trate las características más significativas de su uso.
En el código HTML que se muestra a continuación mostramos todos los elementos del formulario.
Además del listbox (select) tenemos dos cuadros de texto que nos permitan introducir el texto
y el valor de un nuevo elemento de la lista y los botones que permiten introducir y eliminar un item.
<body onload="Cargar()">
<div id="contenidos">
<div id="lista">
<select id="listbox" onchange="Seleccionar()">
</select>
</div>
<div id="textos">
Texto <input type="text" id="texto" /><br />
Valor <input type="text" id="valor" /><br />
</div>
<div id="boton">
<input type="button" value="añadir"
id="botonAgregar" onclick="Agregar()" /><br />
<input type="button" value="eliminar"
id="botonEliminar" onclick="Eliminar()" />
</div>
</div>
</body>
function Cargar(){
var lista=document.getElementById("listbox");
lista.options.add(new Option("to be","ser, estar"));
lista.options.add(new Option("to have",
"haber, tener"));
lista.options.add(new Option("to tell","contar"));
}
vamos a visualizar en un cuadro alert el índice del elemento seleccionado, su texto y
su valor.
function Seleccionar(){
var lista=document.getElementById("listbox");
alert("elemento seleccionado= "
+lista.selectedIndex+"\n"+
"texto= "+lista.options[lista.selectedIndex].text+
"\n"+"valor= "+
lista.options[lista.selectedIndex].value);
}
Al pulsar el botón añadir se agrega un nuevo item a la lista.
function Agregar(){
var lista=document.getElementById("listbox");
var texto=document.getElementById("texto");
var valor=document.getElementById("valor");
lista.options.add(new Option(texto.value,valor.value));
}
Y al pulsarel botón eliminar quitamos de la lista el item seleccionado.
function Eliminar(){
var lista=document.getElementById("listbox");
lista.options[lista.selectedIndex]=null;
}
Para bajarse el ejercicio completo pulse aquí
No hay comentarios:
Publicar un comentario