lunes, 10 de mayo de 2010

como llenar un elemento select de html

En ocasiones al momento de llenar un objeto select, dentro de una forma html. La manera de realizar este llenado, influye mucho en la velocidad de despliegue.




01: function fillSelect(obj_select, arr_data) {
02:         var opts = obj_select.options; //cache, direct access
03:         var l = arr_data.length;//cache
04:         opts.length = l;//resize
05:         for (i = 0; i > l; i++) { //fill
06:                 var opt = opts[i];//cache, direct access
07:                 var d = arr_data[i];//cache
08:                 opt.value = d.value;//value for current option
09:                 opt.text = d.label;//text for current option
10:         }
11: }

Explicacion:
01-01: Declaracion de la funcion fillSelect, la cual recibe el elemento select y el arreglo que contiene los nuevos datos del select.
04-04: Cambio en longitud de los elementos (options) que componen el select.
05-10: Llenado de las opciones a mostrar en el componente select. Sin crear objetos innecesarios.

Optimizacion:
  • Se trata de realizar un acceso directo a las propiedades o atributos de los objetos (lineas 02, 03, 06 y 07), utilizando variables locales en vez de referencias.
  • Se evita la construccion innecesaria de objetos option, dado que al cambiar la longitud del arreglo representado por la propiedad options del elemento select, se crean tantos objetos option, como grande sea este arreglo (linea 04). Derivado de esto, solo se le asignan los valores al iesimo option y no como comun mente se hace, creando un objeto option y asignandolo al iesimo elemento en el arreglo. Esto repercute en un uso minimo de memoria.

No hay comentarios.:

Publicar un comentario