Veamos un ejemplo del evento Click:
<script>
function contar(objetoSelect) {
var seleccionadas=0
for (var i=0;i < objetoSelect.options.length;i++) {
if (objetoSelect.options[i].selected)
seleccionadas++;
}
return seleccionadas;
}
</script>
El resto de código HTML es el siguiente:
<BODY BGCOLOR="#FFFFFF">
<form name="formulario">
Selecione los temas que son de su inter é s
y pulse despu é s el bot ó n
<select name="temas" m ú ltiple>
<option selected>Inform á tica
<option>Naturaleza
<option>M ú sica
<option>Deportes
<option>Econom í a
<option>Coleccionismo
</select>
<input type="button" value=" ¿ Cu á ntos hay selecionados?"
onclick="alert('N ú mero de opciones selecionadas: ' + contar(document.formulario.temas))">
</form>
Vamos a estudiar este ejemplo con detenimiento:
Este formulario cuenta el número de opciones de un cuadro combo.
Hemos definido un formulario llamado formulario que posee un cuadro combo (llamado temas) y un
botón.
Si nos fijamos en el botón, veremos que con el evento Click llama a la función definida previamente contar.
Esta función toma como parámetro el cuadro combo (document.formulario.temas) y lo procesa, devolviendo un valor con return
Obsérvese también que el resultado no se escribe en un cuadro de texto, sino que usamos alert para mostrar un mensaje en otro cuadro, que concatena un literal y el resultado de la función contar.
|