viernes, 1 de marzo de 2013

Evento onclick en la etiqueta option de HTML

Valencia, 01/03/2013 Gatsu

En mi anterior post escribí una anotación curiosa que imagino que a más de uno le habrá llevado de cabeza, en este post me voy a mantener en esa salsa ya que, "con los navegadores hemos topado".

¿Cuántas veces hemos visto que hemos hecho un código html y funciona bien en firefox pero no chrome, o funciona bien en IE pero en ninguno más? En este post hablaré sobre el uso del evento onclick dentro de una etiqueta option.

<select>
    <option value="1" onclick="javascript:alert('1');">primera opción</option>
    <option value="2" onclick="javascript:alert('2');">segunda opción</option>
</select>

Actualmente sólo firefox reconoce eventos dentro del tag option, si esa misma página con ese código lo ejecutas en chrome o IE no hará nada, por lo que la única forma (que me sé) para hacer un código entendible para todos los navegadores es la de usar el evento onchange dentro del select de la siguiente manera:

<select onchange="javascript:alert(this.value);">
    <option value="1" onclick="javascript:alert('1');">primera opción</option>
    <option value="2" onclick="javascript:alert('2');">segunda opción</option>
</select> 

Aunque es una forma que no es tan personalizada como poner lo que queramos en cada onclick, es la forma válida para todos los navegadores, el código lógicamente se debe extrapolar a llamar una función que trabaje adecuadamente con los valores que recibe.

4 comentarios:

  1. Muchas gracias, lo andaba buscando =D

    ResponderEliminar
  2. este metodo serviria para aplicarlo a un select option que se genera automaticamente desde una base de datos

    ResponderEliminar
    Respuestas
    1. Sí, mientras que el select se renderice como un elemento HTML normal y corriente, la función javascript que se ejecute con onchange se procesará correctamente

      Eliminar