Cambiar las options de un select

[josgat]

Hola a todos,

Mi problema es el siguiente: Tengo el típico formulario con provincias y municipios de forma que al seleccionar la provincia se me cargan mediante llamadas AJAX los municipios. Bueno, pues funciona perfectamente en firefox pero no en IE6 (ya he buscado y es un bug). He utlizado la propiedad innerHTML.

He encontrado una solución cargando las opciones con un bucle, pero esto es muy lento ya que tiene que cargar muchas opciones.

Otra solución que he encontrado es utilizar el outerHTML, pero de esta forma me encuentro con el problema que al redefinir el SELECT no me funciona el evento onchange. Como puedo solucionar esto?

Gracias!

[derkenuke]

Mmm, el outerHTML sólo te funcionará en IE, creo que no es estándar.

¿De cuantas opciones estamos hablando? No debería darte complicaciones.
Postea el código que usas para añadir una opcion a un select, quizás se pueda optimizar.

[josgat]

Hola,

Pues hablamos de municipios de una provincia, supongo que lo que relentiza el proceso es parsear el string para sacar las options, te posteo el código JavaScript que he utilizado:

Código PHP:

  function select_innerHTML(objeto,innerHTML){
/******
* select_innerHTML - innerHTML to add option(s) to select(s)
* Problem: http://support.microsoft.com/default.aspx?scid=kb;en-us;276228
* Creative Commons license
* Versão: 1.0 - 06/04/2006
* Author: Micox - Náiron J.C.G - [email protected] - elmicoxcodes.blogspot.com
* Parametros:
* objeto(tipo object): the select
* innerHTML(tipo string): the new innerHTML
*******/
    objeto.innerHTML = ""
    //creating phantom element to receive temp innerHTML
    var selTemp = document.createElement("micoxselect")
    var opt;
    selTemp.id="micoxselect1"
    document.body.appendChild(selTemp)
    selTemp = document.getElementById("micoxselect1")
    selTemp.style.display="none"
    if(innerHTML.toLowerCase().indexOf("<option")<0){//if not option, convert do option
        innerHTML = "<option>" + innerHTML + "</option>"
    }
    innerHTML = innerHTML.replace(/<option/g,"<span").replace(/</option/g,"</span")
    selTemp.innerHTML = innerHTML
    //transfering childs of phantom element to options
    for(var i=0;i<selTemp.childNodes.length;i++){
        if(selTemp.childNodes[i].tagName){
            opt = document.createElement("OPTION")
            for(var j=0;j<selTemp.childNodes[i].attributes.length;j++){
                opt.setAttributeNode(selTemp.childNodes[i].attributes[j].cloneNode(true))
            }
            opt.value = selTemp.childNodes[i].getAttribute("value")
            opt.text = selTemp.childNodes[i].innerHTML
            if(document.all){ //IEca
                objeto.add(opt)
            }else{
                objeto.appendChild(opt)
            }                    
        }    
    }
    //clear phantom
    document.body.removeChild(selTemp)
    selTemp = null
} 
   

[derkenuke]

¿Podrías explicar un poco el código ese? Es que no lo entiendo muy bien...
Una de las primeras líneas es:
var selTemp = document.createElement("micoxselect")
que crea un elemento con una etiqueta que no existe, no creo que sea recomendable. Luego le pones un id y hallas su referencia con getElementById, pero la referencia ya la tenías cuando creaste el elemento con esa línea que he copiado...

Después le asignas el display="none" para que no se dibuje en la página. Entonces, ¿Porqué selTemp no es un <select> normal y estandar?

Con esta línea:
innerHTML =innerHTML.replace(/<option/g,"<span").replace(/</option/g,"</span");
conviertes todo lo que sea <option> a <span>, pero parseando el HTML, lo cual no tiene sentido existiendo DOM, pudiendo trabajar con los objetos directamente sin tener que parsear nada...

Y después sí que utilizas DOM para pasar el HTML adjuntado a selTemp al objeto en cuestión...


No entiendo muy bien la lógica de ese código... eso de parsear el HTML pasando todos los <option> a <span> para luego hacer un DOM... no sé no sé.


¿Por qué no introduces las opciones en un array y luego las colocas en objeto a la manera tradicional?: (como en las FAQs)

Código PHP:

     function addOpt(oCntrl, iPos, sTxt, sVal){
     var selOpcion=new Option(sTxt, sVal);
     eval(oCntrl.options[iPos]=selOpcion);
   } 
   

¿De esa manera se te ralentiza? Creo que es más limpio y más rápido.. habría que probarlo.

Cuéntame qué tal así.

[josgat]

Hola,

A ver, te explico: Esa función la encontré por ahí y vi que funcionaba bien (pero lenta). Evidentemente la opción que tu me das es mucho mejor, pero como comentaba en el primer post, las opciones a cargar en el select se obtienen por AJAX el cual únicamente me devuelve un String con todas las opciones, por eso hay que parsear el string. Evidentemente lo que relentiza la función es parsear el String.

Un saludo y gracias.

[derkenuke]

No estoy muy seguro porque así de memoria AJAX no me lo sé; pero creo que aparte de un string también puede devolver un XML (responseXML o algo parecido...).

Podrías utilizar esa estructura xml para colocar los <option> y luego con DOM leerlo.

Luego tienes la opción de que si sólo puedes pasar string, hacer como una especie de CSV, un string de datos separados por |

texto de opcion 1|valor de opcion 1|seleccionado
texto de opcion 3|valor de opcion 2|no seleccionado

Así cuando llegue a tu script, haces un split("\n") y un split("|") y tienes todas las opciones con sus valores y su texto listas para meter en el select..

Es una idea..

[josgat]

Hola, pues soy bastante cabezón y he intendado hacerlo de otra forma, ... pero no puedo dedicarle más tiempo así que al final lo he hecho como tu dices, he cambiado la respuesta AJAX para hacer los Splits.

Muchas gracias.

De todas formas, he probado con el outerHTML, pero no he sabido recargar el método onchange de el objeto select.... si a alguien se le ocurre como...

gracias

[derkenuke]

Iniciado por josgat

pero no he sabido recargar el método onchange de el objeto select.... si a alguien se le ocurre como...

¿a qué te refieres con recargar el método onchange?