Schnellere Möglichkeit zum Befüllen <select> mit Javascript

Ich habe zwei < wählen Sie> Felder auf einem Formular. Durch Auswählen eines Elements im ersten Feld < Auswählen> wird festgelegt, was in der zweiten < Auswahl> (unter Verwendung von Ajax http_request) angezeigt werden soll.Schnellere Möglichkeit zum Befüllen <select> mit Javascript

In einigen Fällen kann es eine große 500 (Raten) Elemente in der zweiten Auswahl geben und es dauert 5-10 Sekunden Zeit, um in IE zu aktualisieren. Firefox scheint perfekt zu funktionieren.

Ich frage mich, ob es einen schnelleren Weg gibt, dies zu erreichen. Derzeit erstellt der Server eine Zeichenfolge, übergibt sie an den Client, der dann aufgeteilt wird, und fügt jedes Element zur Auswahl hinzu, indem ein Optionselement erstellt und dann zur < Auswahl> hinzugefügt wird.

Ich versuchte den ganzen wählen Sie den Punkt als String auf dem Server zu erstellen und dass aus irgendeinem Grunde zum Formular hinzufügen, aber es wäre in Firefox (etwas verpaßt?) Nicht funktioniert

Dank

Quelle

2009-03-30 Anonymous

Einstellung mit SelectElement.innerHTML wäre die schnellste ... aber that FAILS in IE.

Zuletzt habe ich gecheckt, können Sie dies in IE tun, wenn Sie alle Optionen in einem falschen <div> Tag wickeln oder das gesamte .outerHTML der Auswahlliste im Internet Explorer festgelegt.

Quelle

2009-03-30 20:09:40 scunliffe

Es würde sehr helfen, Ihren Code zu sehen.

Wenn Sie ein <option> Element erstellen und es bei jeder Iteration anhängt, sollten Sie sofort alle <option> Elemente zu schaffen, und dann sie alle auf einmal anhängt.

So (in psuedocode):

// Don't do this: 
for choice in choices: 
    option = new Options(choice) 
    select.append(option) 


// Do this instead 
var options = array() 

for choice in choices: 
    options.append(new Options(choice)) 

for option in options: 
    select.append(option) 

// Or you might try building the select element off-screen and then appending to the DOM 
var options = array() 
var select = new SelectElement() 

for choice in choices: 
    select.append(new Options(choice)) 

dom_element.append(select)

Quelle

2009-03-30 20:23:41 Triptych

wie funktioniert das Array mit Hilfe? Sie müssen immer noch {n} Anhängen an die Auswahlliste (was das Geschwindigkeitsproblem verursacht, da der Browser nach jedem Anhängen bestimmen muss, ob die Größe der Liste aktualisiert werden muss) – scunliffe

@scunliffe - Browseroptimierung kommt selten bis hin zur Big-O-Komplexitätsanalyse. Meine Vermutung war, dass IE die Wiedergabe der neuen Option-Elemente auf dem Bildschirm verzögern könnte, wenn sie alle gleichzeitig an das DOM angehängt wären, was die Dinge beschleunigen sollte. Einfach etwas ausprobieren. – Triptych

Ich würde die ganze schaffen auf dem Server auswählen und in die Seite zu injizieren. Dieser Ansatz umgeht lästige Browserdiskrepanzen und reduziert die Komplexität des clientseitigen Codes.

Sie haben erwähnt, dass Sie das versucht haben, aber es ist in Firefox fehlgeschlagen. Ich würde vorschlagen, beharrlich darin zu sein, es zur Arbeit zu bringen, eine andere Frage postend, die um Hilfe in diesem Problem bittet, oder redigierend Ihre Frage, um uns zu zeigen, was Sie machten, das in Firefox nicht funktionierte.

Quelle

2009-03-30 20:30:22 karim79

500 Elemente ist nicht viel, auch für IE. Sie müssen etwas anderes tun, um die Verzögerung zu verursachen.

Ich habe gerade versucht mit 500+ Optionen in IE6, IE7, FF2 und FF3 und alle waren fast sofort. Ich habe diesen Code verwendet:

Ich würde vorschlagen, das Bit des Codes, der die Daten abruft und die Dropdownliste auffüllt. Etwas anderes könnte die Zeit in Anspruch nehmen. Überprüfen Sie beispielsweise, ob der Code, der den vom Server zurückgegebenen Zeichenfolgenwert "auflöst", scharf ist (es klingt, als würden Sie dort Ihre eigenen benutzerdefinierten Parsing-Anweisungen ausführen).

Quelle

2009-03-30 22:54:40

Um ... sollte es nicht sein 'select.options.add (neue Option (d.text, d.value))'? – tzot

Als ich die erste Version dieser verwenden funktioniert es aber kann sehr langsam sein, die zweite bei der Aktualisierung wählen

 
<html> 
<form id='myform' method='post' action='$_SERVER[PHP_SELF]'> 
<table> 
<tr><td><select onselect='CALL_AJAX_AND_UPDATE();'></select></td></tr> 
<tr><td><select id='selectid'></select></td></tr> 
</table> 
</form> 
</html> 

<script type=\"text/javascript\"> 
function UPDATE(updatedata) 
{     
    var itemid = document.getElementById('selectid');    

    var data = updatedata.split('|'); 
    var len = data.length;               

    for(i=0; i < len; i ++) 
    { 
     var opt = document.createElement('option'); 
     opt.text = data[i]; 

     try 
     { 
      itemid.add(opt, null);       
     } 
     catch(ex) 
     { 
      itemid.add(opt);  
     }  
    }           
} 
</script>

Diese Version in IE funktioniert, aber Firefox scheint nicht die zweite wählt Daten zu veröffentlichen. Habe damit etwas verpasst.

Quelle

2009-03-31 13:29:23

Das Problem mit all diesen Antworten mit SelectElement.innerHTML ist, dass Sie diesen Trick mit SELECTs nicht machen können. Die Lösung besteht darin, innerHTML für PARENT des SELECT-Elements selbst zu verwenden. Erstellen Sie in Ihrem ajax/jquery/whatever-Code eine Zeichenfolge, die ALLE SELECT HTML-Elemente enthält, und rufen Sie dann den Inhaber (div oder span oder was auch immer) ab und setzen Sie innerHTML auf die von Ihnen erstellte Zeichenfolge.

Sie müssen die SELECT von der Seite isolieren und ihr ein explizites übergeordnetes Element (span oder div) geben, um zu verhindern, dass andere html Elemente verloren gehen, wenn Sie das SELECT Element zerstören/rekonstruieren.

Kurze Antwort:

parentselectelement.removeChild(selectelement); 
parentselectelement.innerHTML = "<select ...><options...></select>";

Quelle

2009-11-20 20:44:02 hova

Vergessen Sie nicht zu document.createDocumentFragment() ersten anhängen, bevor das zu der SELECT-Anhängen.

Quelle

2012-02-24 01:30:18

Der erste Code ist in Ordnung, aber das funktioniert besser für mich:

var data = [ 
    { text: 'uno', value: '1' }, 
    {text: 'dos', value: '2' } 
]; 

var select = document.getElementById('select-choice-1'); 
select.options.length = 0; // clear out existing items 
for (var i = 0; i < data.length; i++) { 
    var d = data[i]; 
    select.options.add(new Option(d.text, d.value)) 
}

Quelle

2012-09-04 23:48:19 serginhofogo

Ich mag Crescent frisch ist und Kemal Fadillah die Antworten da beide Gebrauch:

select.options.add(new Options(name, value))

Wie für das Datenobjekt empfehle ich ein kleine zwicken wie folgt:

var data = { 
    'uno': 1, 
    'dos': 2 
}; 

var select = document.getElementById('select-choice-1'); 
select.options.length = 0; // clear out existing items 
for (var i in data) { 
     select.options.add(new Option(i, data[i])); 
}

Quelle

2013-01-04 03:16:24

Wenn es Ihnen nichts ausmacht mit CoffeeScript dann die folgenden cod e füllt eine Auswahlliste mit JSON-Daten in ein paar Zeilen.

HTML

<select id="clients"></select>

Coffee

fillList=($list, url)=> 
    $.getJSON(url) 
    .success((data)-> 
     $list 
     .empty() 
     .append("<option value=\"#{item.Id}\">#{item.Name}</option>" for item in data) 
    ) 

$ -> 
    fillList($('#clients'), '/clients/all')

Hinweis: Die Schleife innerhalb des append den gesamten HTML-Zeichenkette erzeugt, bevor die Methode append einmal aufrufen. Das ist schön und effizient.

Beispiel JSON

[ 
    {"Id":"1","Name":"Client-1"}, 
    {"Id":"2","Name":"Client-2"} 
]

Quelle

2013-03-12 14:29:17 biofractal

Schnellere Möglichkeit zum Befüllen <select> mit Javascript

Antwort

Verwandte Themen