Mundo Web - Caminando entre formularios V

manuales - recursos - gráficos - programación...

Home - Articulos JavaScript - Caminando entre formularios - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8

CAMINANDO ENTRE FORMULARIOS (VI)
por Luciano Moreno, del departamento de diseño web de BJS Software.

El objeto SELECT.-

Hasta ahora lo que hemos visto no parece muy complicado, pero ahora la cosa se pone un poco más dificil, ya que el objeto SELECT (conocidos también como combos), por su propia construcción, ofrece más posibilidades y posee unas propiedades que requieren un trato especial por parte del lenguaje JavaScript.

La apariencia del elemento select dentro de un formulario puede ser la de una caja de texto de anchura y altura determinada, que posee scrolls o barras de desplazamiento propias para poder navegar por su interior, que contiene en su interior una serie de opciones de las que podemos elegir una o varias, o bien, y lo que es más corriente, aparecer como una especie de caja de texto que tiene una flecha en su parte derecha, y que al ser pulsada despliega su contenido permitiéndonos efectuar una seleción entre las diversas opciones que contiene.. Su sintaxis dentro de un formulario es del tipo:

<select name="menu">
<option value="opcion1">música
<option value="opcion2">cine
<option value="opcion3">teatro
</select>

que como vemos lleva etiqueta de cierre, y una serie de etiquetas interiores OPTION que definen las opciones que van a aparecer en el interior del combo, y cuya apariencia en el navegador es la siguiente:

Las principales propiedades del objeto select son:

name : es la propiedad que va a asignar a cada select un nombre identificador para poder referirnos luego a él y acceder a sus propiedades.
size: que fija el número de opciones que serán visibles en el combo. Para acceder a esta propiedad deberemos escribir:

document.name_formulario.name_select.size= número.

Podemos ver su uso en el siguiente ejemplo.
disabled : esta propiedad bloquea el combo, de tal forma que el texto que contiene se colorea de grís y no se puede accionar el mismo ni hacer ninguna selección en él.
length :que nos da acceso al número de opciones que forman el combo. Su sintaxis típica es del tipo:

document.forms.nombre_formulario.nombre_select.length
type : que nos dice en general qué tipo de objeto de formulario es el referenciado, y en este caso nos informa además si el combo es simple o múltiple. Su forma de acceso es:

document.forms.nombre_formulario.nombre_elemento.type
selectedIndex: que nos permite acceder a la opción elegida por el usuario en un select. Nos devuelve el número de la opción elegida dentro del array options, comenzando por el índice cero. Su forma de acceso es:

document.forms.nombre_formulario.nombre_elemento.selectedIndex

Asociadas a esta propiedad existen otras dos: value y text, que nos dan el value y el texto asociados a la opción elegida. Veamos el siguiente código:

<html>
<head>
<script language="JavaScript" type="text/javascript">
function muestra()
{
     var miOpcion=document.forms[0].equipos.selectedIndex;
  var texto='número de opción elegida= '+miOpcion+'\n';
   texto+='value de la opción = '+document.forms[0].equipos.options[miOpcion].value+'\n';
  texto+='texto de la opción= '+document.forms[0].equipos.options[miOpcion].text;
  alert(texto);
}
</script>
</head>
<body>
<form name="Form1">
<select name="equipos" onChange="muestra()">
<option value="entrada">---selecciona un equipo---</option>
<option value="rmadrid">Real Madrid</option>
<option value="barga">Barcelona</option>
<option value="atletico">Atlético de Madrid</option>
</select>
</form>
</body>
</html>

que podemos ver funcionando en la siguiente ventana.
selected : propiedad booleana que comprueba si una opción determinada a sido seleccionada o no. Como ejemplo de su uso veamos el siguiente código:

<html>
<head>
<script language="JavaScript" type="text/javascript">
function muestra()
{
if(document.forms[0].equipos.options[1].selected==true)
alert('el mejor equipo');
}
</script>
</head>
<body>
<form name="Form1">
<select name="equipos" onChange="muestra()">
<option value="entrada">---selecciona un equipo---</option>
<option value="rmadrid">RealMadrid</option>
<option value="barga">Barcelona</option>
<option value="atletico">Atlético de Madrid</option>
</select>
</form>
</body>
</html>

que apreciamos trabajando en la siguiente ventana.
multiple : que convierte el combo de una sóla opción con flecha desplegadora en un combo de varias filas, en el que el usuario puede elegir varias de las opciones manteniendo pulsada la tecla "control" mientras ejecuta la selección.

Vamos a ver un ejemplo en el que vamos a cambiar esta propiedad dinámicamente, junto con el texto y funcionalidad de un botón. El código necesario sería:

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
var estado=1;
function cambia(){
estado=!estado;
if (estado==0){
document.forms[0].menu.multiple=true;
document.forms[0].boton.value="simple";
}
else{
document.forms[0].menu.multiple=false;
document.forms[0].boton.value="multiple";
}
}
</script>
</head>
<body bgcolor="#ffffcc">
<form name="ejemplo1">
<select name="menu">
<option value="opcion1">música
<option value="opcion2">cine
<option value="opcion3">teatro
</select><br><br>
<input type="button" name="boton" value="multiple" onclick="cambia()">
</form>
</body>
</html>

inicialmente tenemos un elemento select simple y un botón con un texto. Para bcambiar los valores de ambos elementos definimos una variable "estado", que inicialmente vale 1, y creamos una función que lo primero que hace es cambiar el valor de esta variable cada vez que la llamamos, y luego ejecuta unas acciones u otras dependiendo del valor de la variable estado, es decir, alternativamente ejecuta un bloque de instrucciones o el otro. Ya sólo nos queda acceder en cada bloque a la propiedad multiple del combo y a la propiedad value del botón, cambiándoles los valores. Por último mediante el evento onClick del botón llamamos a la función cada vex que se pulse este. Podemos ver la función trabajando en la siguiente ventana.
option : esta es sin duda una de las propiedades más importantes y complejas del objeto select, y especifica y permite acceder a cada una de las diferentes opciones del combo. Su estudio es bastante complejo, por lo que estudiaremos esta propiedad en el siguiente capítulo.

El objeto select posee el método:

focus(): este método sitúa el cursor sobre el combo. La forma de usarlo es del tipo:

document.forms.name_formulario.name_select.focus();

y podemos apreciar su uso en el siguiente ejemplo, en el que a pesar de haber en el formulario un campo de texto antes, situamos inicialmente el foco en el combo.

Por otra parte, estos objetos poseen los siguientes eventos:

onFocus : que se activa al recibir el foco el combo, bien porque se pinche dentro con el ratón, bien por acceder al mismo mediante el tabulador. Vamos a ver cómo podemos usar este evento para lanzar un mensaje al usuario para que haga una selección en el combo:

<html>
<head>
</head>
<body>
<form name="ejemplo1">
<select name="menu" onfocus="alert('por favor, elija un tema')">
<option value="opcion0">?qué tema le gusta?
<option value="opcion1">música
<option value="opcion2">cine
<option value="opcion3">teatro
</select>
</form>
</body>
</html>

que vemos en acción en el siguiente ejemplo.
onBlur : el evento onBlur se lanza cuando el combo pierde el foco despúes de haberlo recibido, es decir, cuando el usuario lo abandona tras haberlo activado. Podemos usarlo por ejemplo para lanzar un mensaje de agradecimiento al usuario, uso que podemos apreciar en esta ventana.
onChange : en el ejemplo anterior el mensaje de alerta se lanza cuando el usuario abandona el combo, pero no distingue si se ha cambiado la opción inicial o por defecto, aparte de que precisa que se pinche fuera del mismo (por eso hemos puesto el botón "enviar", que no hace nada, sólo coger el foco). Todo esto se evita mediante el uso del evento onChange, que se activa cuando se cambia la opción actual del combo por otra, y que no precisa de que se pinche en otro sitio de la ventana. Podemos ver la diferencia con el caso anterior en este ejemplo.
onClick : que no conviene utilizar nunca, ya que se lanzaría cada vez que se pinchara en el combo, lo que impediría al usuario efectuar una selección.
onMouseOver , onmouseOut, ondblClick, onkeyPress,onKeyUp : estos eventos son aceptados por este objeto, al igual que los demás objetos de formulario, pero no son útiles en absoluto (salvo contadas excepciones), por lo que no se usan.

Home - Articulos JavaScript - Caminando entre formularios - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8