|
|||||
|
|
|
|
|
|
|
|
||||
|
|
||||
|
|||||
Home - Articulos JavaScript - Caminando entre formularios - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
CAMINANDO ENTRE FORMULARIOS (VII)
por Luciano Moreno, del departamento de diseño web de BJS
Software.
El objeto OPTION.-
?Cómo es que digo el objeto OPTION, cuando en el capítulo anterior hemos visto que este elemento es una propiedad del objeto SELECT?. Pués bien, esto es así porque la propiedad OPTION posee a su vez una serie de propiedades que la individualizan y la hacen ser un objeto propio accesible mediante JavaScript, además de ser el camino que vamos a tener para dar una funcionalidad propia a su objeto padre SELECT.
Las principales propiedades del objeto option son:
El objeto option no posee métodos ni eventos propios.
El Array OPTIONS.-
Al igual que el objeto form lleva está representado por el array forms[index], que contiene todos los formularios del documento, el objeto option lleva asociado el array OPTIONS[index], que contiene todas las opciones contenidas o por contener en un select. Así pues, podemos definir también que el objeto select tiene una propiedad OPTIONS[index], que contiene todas las posibles opciones del mismo.
Con este planteamiento, podemos acceder a cualquiera de las opciones de un combo mediante la referencia:
document.name_formulario.name_select.options[index].propiedad.
en donde index comienza por 0, al igual que casi todos los arrays de JavaScript.
Este objeto - Array posee la propiedad length, que nos da el número de opciones que hay en el select, y cuyo acceso se realiza con la escritura:
document.name_formulario.name_select.options.length
y que podemos ver en el siguiente ejemplo.
También posee una propiedad fundamental, selectedIndex, que nos va a servir de base para trabajar con estos objetos. Esta propiedad devuelve el índice dentro del array de la opción seleccionada (comenzando por 0). Para acceder a este valor vamos a definir una variable:
var indice=document.name_formulario.name_select.options.selectedIndex
y una vez que tenemos el índice correspondiente a la opción seleccionada almacenado en la variable podemos acceder tanto a la propiedad value de la opción:
var valor= document.name_formulario.name_select.options[indice].value
como al texto asociado a la misma:
var valor=document.name_formulario.name_select.options[indice].text
Vamos a ver un ejemplo que aclare todo esto, en el que vamos a pasar el valor del índice, del texto y del value de la opción seleccionada por el usuario cada uno a un campo de texto:
<html>
<head>
<script
language="JavaScript" type="text/javascript">
function pasa ( ) {
var
indice=document.forms.ejemplo.menu.options.selectedIndex;
var
valor=document.forms.ejemplo.menu.options[indice].value;
var
texto=document.forms.ejemplo.menu.options[indice].text;
document.forms.ejemplo.caja1.value=indice;
document.forms.ejemplo.caja2.value=valor;
document.forms.ejemplo.caja3.value=texto;
}
</script>
</head>
<body>
<form
name="ejemplo">
<select name="menu">
<option
value="opcion0">esquí
<option value="opcion1">música
<option
value="opcion2">cine
<option value="opcion3">teatro
</select>
<input
type="button" value="pasa valores"
onClick="pasa()"><br><br>
indice:<input type="text" name="caja1" size="1"
readonly><br>
value:<input type="text" name="caja2"
readonly><br>
texto:<input type="text" name="caja3"
readonly>
</form>
</body>
</html>
que podemos ver funcionando en la siguiente ventana.
Para comprobar si una determinada opción del combo ha sido seleccionada, el objeto options dispone de la propiedad booleana selected, que devuelve true si el índice especificado es el elegido, y false en caso contrario. La forma de usar esta propiedad es:
if(document.name_formulario.name_select.options[i].selected==true/ false) instrucciones...
que podemos ver en el siguiente ejemplo, en el que dependiendo de la opción selecionada por el usuario le lanzamos diferentes mensajes de alerta.
El constructor new Option.-
El objeto select posee también un constructor propio, new Option, que nos va a permitir introducir dinámicamente una o varias opciones nuevas dentro de un combo. La sintaxis genérica de este constructor es:
otraopcion=new Option("texto","valor", "defaultSelected", "selected")
en donde texto va a ser el texto asociado a la nueva opción y valor su value asociado, defauldSelected deberemos ponerlo si queremos que sea la opción seleccionada por defecto en el combo y selected si queremos que sea la seleccionada sólo en el momento de crearla.
Una vez creada la nueva opción hay que introducirla en el combo, y esto se consigue mediante la escritura:
document.forms.nombre_formulario.nombre_select.options[indice n+1]=otraopcion
en donde debemos poner como índice n+1, es decir, el índice debe ser una unidad mayor que el último que tenga anteriormente el select, ya que si ñe ponemos como índice uno ya existente en vez de crear uno nueva opción lo que haríamos sería sustituir una existente por la nueva. Vamos a ver un ejemplo para aclarar esto, en el que vamos a introducir una nueva opción en nuestro combo inicial.
<html>
<head>
<script
language="JavaScript" type="text/javascript">
function nueva ( ) {
var deporte= new Option('deporte','opcion4','',
'selected');
document.ejemplo1.menu.options[4]=deporte;
}
</script>
</head>
<body>
<form
name="ejemplo1">
<select name="menu">
<option
value="opcion0">?qué tema te gusta?
<option value="opcion1">música
<option value="opcion2">cine
<option value="opcion3">teatro
</select>
<input type="button" value="opción deporte"
onClick="nueva()">
</form>
</body>
</html>
que vemos trabajando en la siguiente ventana.
Si lo que deseamos es borrar una de las opciones que ya existen en un combo, la escritura a usar es:
document.forms.nombre_formulario.nombre_select.options[ n ]=null
y con esto borramos la opción correspondiente, pero su lugar sigue ahí, aunque vacio. Para hacer las cosa bien deberemos quitar esta opción vacía, y esto lo conseguimos pasando las opciones que tienen un índice mayor que la borrada un lugar hacia abajo en la lista de índices del objeto options. Esto lo podemos ver en el siguiente código:
<head>
<script
language="JavaScript" type="text/javascript">
function borra(
){
document.forms.ejemplo.menu.options[0].text=document.forms.ejemplo.menu.options[1].text;
document.forms.ejemplo.menu.options[1].text=document.forms.ejemplo.menu.options[2].text;
document.forms.ejemplo.menu.options[2].text=document.forms.ejemplo.menu.options[3].text;
document.forms.ejemplo.menu.options[3]=null;
}
</script>
</head>
<body>
<form
name="ejemplo">
<select name="menu">
<option
value="opcion0">esquí
<option value="opcion1">música
<option
value="opcion2">cine
<option value="opcion3">teatro
</select>
<input type="button" value="borra esquí"
onClick="borra()">
</form>
</body>
</html>
que vemos en acción en este ejemplo.
Si deseamos sustituir una opción de un combo por otra nueva, deberemos sustituir el texto y el value por los asociados a esta, y un ejemplo de esto sería:
<html>
<head>
<script
language="JavaScript" type="text/javascript">
function cambia(){
var
indice=document.forms.ejemplo.menu.selectedIndex;
document.forms.ejemplo.menu.options[indice].value='opcion4';
document.forms.ejemplo.menu.options[indice].text='futbol';
}
</script>
</head>
<body>
<form
name="ejemplo">
<select name="menu">
<option
value="opcion0">esquí
<option value="opcion1">música
<option
value="opcion2">cine
<option value="opcion3">teatro
</select>
<input type="button" value="cambia esquí"
onClick="cambia()">
</form>
</body>
</html>
que vemos trabajando en el siguiente ejemplo.
 |
 |
Home - Articulos JavaScript - Caminando entre formularios - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8