You are currently browsing the tag archive for the ‘HTML SELECT’ tag.

En una página web, se cargan muchas veces las opciones de un elemento SELECT de forma dinámica. Una forma de hacerlo es asignar un nuevo valor al atributo innerHTML. Desgraciadamente esto no funciona con el navegador Internet Explorer.

El atributo innerHTML no es estándar en Javascript, pero todos los navegadores suelen saber interpretarlo como el código HTML entre la etiqueta de inicio y del fin; es decir, el texto entre <SELECT> y </SELECT>. Es un atributo tan poderoso y tan fácil de entender, que cuesta aceptar que el Internet Explorer no lo entiende para un elemento como SELECT, que tantas veces carga un contenido dinámico.
Me imagino que todos los programadores de páginas web se ha estropeado con este problema alguna vez – unos como yo incluso varias veces por no haberse apuntado una nota sobre esta trampa. Espero que este artículo sirva de acortar las penurias de los más prójimos.

Echamos un vistazo al elemento SELECT y los dos botones “Cambiar innerHTML” y “Cambiar outerHTML”. Como este sitio web no permite incluir Javascript, no puedo incluir el ejemplo directamente en el artículo. Para probar y jugar se puede copiar el siguiente código en un fichero vacío, nombrarlo “select.html” y abrirlo en un navegador.

<div style="border: 1pt solid silver; text-align: center;">
	<script type="text/javascript">
		function changeInnerHtml()
		{
			mi_select = document.getElementById("mi_select");
			mi_select.innerHTML =
				"<option>Valor modificado por innerHTML</option>";
		}

		function changeOuterHtml()
		{
			mi_select = document.getElementById("mi_select");
			mi_select.outerHTML = "<select id='mi_select'>" +
				"<option>Valor modificado por outerHTML</option>" +
				"</select>";
		}
	</script>
	<select id="mi_select">
		<option>Valor inicial</option>
	</select>
	<br>
	<input type="submit" value="Cambiar innerHTML" onClick="changeInnerHtml();">
	<input type="submit" value="Cambiar outerHTML" onClick="changeOuterHtml();">
</div>

Inicialmente el elemento SELECT contiene una opción con el texto “Valor inicial”. Pulsando uno de los dos botones se cambia el contenido del elemento SELECT por una opción “Valor modificado”. Podemos elegir entre dos estrategias:

  1. Cambiar el atributo innerHTML, es decir, el texto entre las etiquetas <SELECT> y </SELECT> o
  2. Cambiar el atributo outerHTML que es el código que incluye las etiquetas de inicio y fin del elemento SELECT.

Podemos pulsar estos botones sin miedo – para reiniciar las opciones del elemento SELECT recarga la página.

Dependiendo del navegador que usamos, estos botones funcionan o no. En Mozilla Firefox, por ejemplo, el botón “Cambiar outerHTML” no tiene efecto, ya que el navegador desconoce el atributo outerHTML. Igual que innerHTML, el atributo outerHTML no es estándar tampoco. Sin embargo, Internet Explorer lo reconoce.

En versiones anteriores de Internet Explorer el elemento SELECT aparece vacío tras cambiar su atributo innerHTML.
Microsoft está consciente del problema (ya desde la versión veterana 5 del Internet Explorer) y ha propuesto varias alternativas en su comunicado Error de Internet Explorer establecer la propiedad del objeto seleccionar innerHTML. (Este es el título que fue calculado por el traductor automático en su momento. El título en inglés es “BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object”.)

Parece que se ha “resuelto” este problema en la versión 8: Ahora cambiar el atributo innerHTML no hace nada y se muestra en la lista de errores el mensaje: “El objeto no acepta esta propiedad o método.” Desgraciadamente no es una solución satisfactoria tampoco y no hay más remedio que utilizar una de la propuestas en el artículo mencionado arriba. Para hacer la elección más fácil, la versión 8 de Internet Explorer trata el atributo outerHTML igual como el atributo innerHTML. Es decir, no funciona – igual como en Mozilla Firefox donde nunca funcionó.

En conclusión, la única solución será añadir las opciones de una en una al
elemento SELECT
. En este contexto vale echar un ojo a JSON (JavaScript
Object Notation) antes de componer un bucle de Javascript mediante PHP u otro lenguaje de servidor.
Otra opción, desde luego, es usar un navegador como Opera. Este programa entiende ambas propiedades: innerHTML y outerHTML.

Referencias

Directamente relacionado con este artículo:

Información adicional:

Páginas web de los navegadores mencionados:

Artículos sobre HTML en este blog:

HTML tiene un elemento SELECT que permite el atributo multiple para poder seleccionar más que una opción a la vez. (Las selecciones mútliples se hacen normalmente pulsando la tecla Control mientras se seleccionan las opciones con el ratón.) El atributo multiple no tiene valor. Si no está, entonces el elemento SELECT sólo permite seleccionar una opción. Este artículo explica como puedo obtener múltiples opciones seleccionadas en un programa PHP.

PHP devuelve los datos enviados desde un formulario en la variable “súperglobal” $_REQUEST. La variable $_REQUEST es una unión de las variables súperglobales $_GET, $_POST y $_COOKIE. Por lo tanto, su contenido no depende si hemos recibido los datos via un “GET” o un “POST”. Es decir, es una buena opción en general.

La variable $_REQUEST es un array asociativo, donde los índices son los valores de los atributos id o name de los elementos de entrada en el formulario HTML enviado. A cada índice se asigna el contenido del elemento correspondiente. En un SELECT simple se devolvería la opción seleccionada si hay.

Por ejemplo, consideramos el siguiente SELECT de selección simple (nótese la ausencia del atributo multiple):

<SELECT id="mi_select">
    <OPTION value="hola mundo">Hola mundo</OPTION>
</SELECT>

Si hubiéramos seleccionado la opción “Hola mundo”, entonces, en PHP, la expressión $_REQUEST['mi_select'] tendría el valor 'hola mundo'. (El valor del atributo value del elemento OPTION.)

Sin embargo, si el elemento SELECT tuviera puesto el atributo multiple, entonces sólo obtendríamos el valor de la última opción seleccionado. Para obtener todas las opciones, el valor de $_REQUEST['mi_select'] debería ser un array. Esto conseguimos cambiando el id del elemento SELECT a mi_select[]. (Esto es el mismo nombre más los corchetes [].)

<SELECT id="mi_select[]" multiple>
    <OPTION value="hola mundo">Hola mundo</OPTION>
</SELECT>

Este pequeño truco causa que $_REQUEST['mi_select'] es un array. Ahora puedo hacer un bucle sobre todas las opciones seleccionadas.

foreach ($_REQUEST['mi_select'] as $option_value)
{
    // Haz algo con el valor de la opción seleccionada $option_value
}

En corto: Asigna un nombre terminado en corchetes “[]” a un elemento SELECT cuando tiene puesto el atributo multiple para poder extraer todas las opciones seleccionadas desde PHP.

Referencias

Escribe tu dirección de correo electrónico para suscribirte a este blog, y recibir notificaciones de nuevos mensajes por correo.

Únete a otros 21 seguidores

Archivos

septiembre 2014
L M X J V S D
« ago    
1234567
891011121314
15161718192021
22232425262728
2930  
Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.