May 132014
 
Artículo HTML

En un formulario HTML puede existir un elemento <select> con un número elevado de opciones, que podrían ser agrupadas por algún criterio para mejorar la usabilidad del mismo.

Agrupar las entradas de un dropdown con código HTML estático

Tomemos como ejemplo un formulario en el que aparece un campo para seleccionar un país de una lista. El código HTML del campo podría ser el siguiente:

Pero los países se pueden agrupar por distintos criterios: El continente al que pertenecen, el idioma oficial,…

Para presentar los países agrupados por el criterio que nos interesa, podemos utilizar el tag <optgroup>. Por ejemplo, para agrupar los países por el idioma que se habla en ellos, reescribimos el código HTML del campo “idpais” de la siguiente forma:

Y así obtenemos el siguiente resultado:

Agrupar las entradas de un dropdown dinámicamente con javascript

Otra posibilidad para agrupar las entradas de un dropdown, es hacerlo mediante javascript, añadiendo una función que se ejecuta cuando finaliza la carga de la página, y reescribe el contenido del dropdown.

Para ello, utilizamos las funciones javascript:

  • document.getElementByID – Para obtener un puntero al elemento “select”
  • getElementByTagName –  Para obtener un array con las entradas que contiene el elemento “select”
  • createElement(“optgroup”), optgroup.setAttribute(“label”) – crea un nuevo elemento “optgroup”, y le asigna un texto.
  • appendChild, removeChild – añade y elimina subelementos del elemento “select” y de los elementos “optgroup”

 

Por ejemplo, la siguiente función agrupa las entradas del dropdown por su primer carácter:

Referencias

 Publicado por en 8:44 pm

 Deja un comentario

(requerido)

(requerido)