Brzo Ajax popunjavanje select boxa?

[ agvozden @ 20.11.2007. 14:58 ] @

Imam potrebu da popunim nekoliko select boxa nakon ucitavanja strane.
Kako su oni velicine preko 1000 stavki javlja mi se problem brzine, narocito u IE6 (u FF je ovo trenutno).
Da napomenem da je posle ucitavanja potrebno setovati i index-e.

recimo:

Code:
function innerHTML_select(object,innerHTML){
    if(document.all) {
        object.innerHTML = innerHTML;
        object.outerHTML = object.outerHTML;
    } else
...

moze brzo odraditi ovaj posao, medjutim neupotrebljivo je zbog setovanja index-a - nece da radi field.childNodes.length;

Nacin sa document.createElement("OPTION") je sa IE6 uzasno spor.

Da li je neko resavao slicne probleme?

[ Miroslav Ćurčić @ 21.11.2007. 13:39 ] @

Jesi li probao sa:

Code:

document.myform.myselect.options= 0;
for(i=0;i<30;i++) {
document.myform.myselect.options[i]= new Option(i+1);
}

[ agvozden @ 22.11.2007. 15:03 ] @

koristio sam ovakvu funkciju:

Code:
function innerHTML_select(object,innerHTML){
    object.innerHTML = ""
    var selTemp = document.createElement("test_select")
    var opt;
    selTemp.id="test_select1"
    document.body.appendChild(selTemp)
    selTemp = document.getElementById("test_select1")
    selTemp.style.display="none"
    if(innerHTML.toLowerCase().indexOf("<option")<0){
        innerHTML = "<option>" + innerHTML + "</option>"
    }
    innerHTML = innerHTML.replace(/<option/g,"<span").replace(/<\/option/g,"</span")
    selTemp.innerHTML = innerHTML
    var selTempLength = selTemp.childNodes.length;
    for(var i=0;i<selTempLength;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
            opt.text = opt.text.replace(/&/g,"&")
            if(document.all){
                object.add(opt)
            }else{
                object.appendChild(opt)
            }
        }
    }
    document.body.removeChild(selTemp)
    selTemp = null
}

prosledjuje se string "<options>... </options>"

[ Miroslav Ćurčić @ 22.11.2007. 20:31 ] @

Ok, razumeo sam odmah da si išao preko kreiranja čvorova,
probaj ovaj stari "seljački" metod,
jeste da nije moderan ali je za nijansu brži.

[ agvozden @ 23.11.2007. 08:42 ] @

Za nijansu brzi?

Kod koji sam postovao radi fantasticno u FF ( preko 1000 stavki delic sekunde). Medjutim, kao sto rekoh problem je u IE6 (nekoliko sekundi).

Stoga sam primenio sledece:

Code:
function innerHTML_select(object,innerHTML,selected){
    if(document.all) {
        if (selected) innerHTML = object.innerHTML + innerHTML;
        object.innerHTML = '';
        object.outerHTML = object.outerHTML.replace("</SELECT>",innerHTML + "</SELECT>");
    } else
    innerHTML_select_full(object,innerHTML);
    if (selected) selectSetByValue(object,selected)
}

Ukoliko je IE onda se smesti ceo "<option> box" u select field. Resenje koje sam primenio jeste da se selektovana stavka, koja postoji na select boxu pre Ajax-a kao jedina stavka, ostane kao prva. Jeste da se duplira, ali ako se radi o 1000x stavki (konkretno se radi o slikama vec postavljenim na serveru) tim je moguce lako vratiti stvari na pocetno stanje... (Mrzim duge recenice)