La plaga Tux

Últimamente me encuentro inmerso en el desarrollo de un portal Web, con el cual estoy aprendiendo muchas cosas útiles sobre peculiaridades de los lenguajes de programación PHP, JavaScript y SQL. Una de las cosas que más me ha fascinado ha sido la capacidad para crear contenido dinámico por medio de JavaScript en páginas HTML, ya que hasta ahora nunca había hecho gran cosa con este lenguaje de programación.

Sin embargo las distintas formas que tienen los navegadores Web de interpretar el código HTML a veces nos lleva a más de un quebradero de cabeza. A continuación os comento el que he tenido respecto a los elementos <SELECT> y <OPTION>.

Os situo en escena. El elemento option admite el evento onclick mediante el cual podemos ejecutar código javascript cuando pulsamos con el ratón en dicho elemento. El código que os muestro a continuación funcionaba perfectamente en multitud de navegadores como firefox, opera o epiphany, sin embargo en IE y Konqueror no se realizaba correctamente la llamada a la función de javascipt:

<script language="javascript" type="text/javascript">
function miFunctionJS(x, y){
...
}
</script>
...
...
<select multiple="true" name ="miSelect[]" id="miSelect" size="7">
<option onclick="miFuncionJS(valor1 , valor2)" value="valor3">
<?php echo $miarray[0];?>
</option>
...
<option onclick="miFuncionJS(valor1 , valor2)" value="valor3">
<?php echo $miarray[0];?>
</option>
</select>

¿Por qué? Tras mucho investigar parece ser que algunos navegadores como IE no reconocen los eventos del elemento option y hay que trabajar con los eventos que maneja el elemento que contiene los options, es decir, el elemento select. Este elemento puede manejar varios eventos, pero el que nos interesa en este caso es el evento onchange, el cual se dispara cuando cambia el contenido del elemento o se cambia el elemento seleccionado. Con este evento por tanto, podemos detectar también cuando seleccionamos uno de los elementos que quedan dentro del select, osea los diferentes elementos options. Por medio de la propiedad selectedIndex podemos conocer que elemento del select se acaba de seleccionar y obtener su valor o hacer lo que queramos con ese índice. A continuación os muestro la adaptación del código anterior realizada para que funcione correctamente el código tanto en IE como en firefox:

<script language="javascript" type="text/javascript">
function miFunctionJS(indice, x){
document.miFormulario.miSelect.options[indice].value // Obtener el valor de un determinado elemento option
...
}
</script>
...
...
<select multiple="true" name ="miSelect[]" id="miSelect" size="7"  onchange="mifuncionJS(this.selectedIndex, valor2)">
<option value="valor3">
<?php echo $miarray[0];?>
</option>
...
<option value="valor3">
<?php echo $miarray[0];?>
</option>
</select>