Lange Selectbox löschen (IE/Moz)

[Markus Treiber]

Hallo zusammen,

ich habe folgendes Problem und bisher keine Lösung hierzu gefunden.

In meinem Web-Projekt habe ich eine sehr lange Select-Box (ca. 7000 Optionen) die mittels Filter reduziert werden soll. Dies habe ich mittels jsrs erledigt. Dies funktioniert auch soweit, nun zum Problem:

Die Daten-Verarbeitung und Abfrage ist in wenige Sekunden erledigt, allerdings dauert das Löschen der vorhanden Einträge unter IE extrem lange (CPU-Last => 100%)

IE: ca. 20-25 sek.
MOZ: 2, max 3 sek.

Mit folgende Code wollte ich die Liste löschen...

for(i=document.form.mat_select.options.length-1;i>=0;i--) {
     document.form.mat_select.remove(i)
 }

Habe auch schon die Methode versucht, die Einträge auf NULL zu setzen und die Methode mit ....length=0. Immer mit dem selben Resultat. Auch das cachen des Select-Objektes hat nichts gebracht. Wenn ich diesen Code-Block auskommentiere, dann läuft das komplette Script in wenigen Sekunden durch, allerdings werden dann die "neuen" Option unten angehängt...

Mit bestem Dank im Voraus!

[masa2]

Hi,

kann man die überflüssigen options nicht mit <style="display: none;">
wegschalten. Wenn Sie sowieso schon geladen sind.

Ansonsten frage ich mich, warum die options geladen werden, wenn Sie im Anschluß sowieso wieder gelöscht werden?

[Markus Treiber]

Ansonsten frage ich mich, warum die options geladen werden, wenn Sie im Anschluß sowieso wieder gelöscht werden?

Weil beim Laden der Seite die Liste komplett dargestellt werden soll und nur bei Bedarf die Filter-Funktion angewandt wird.

Werde beide Ideen testen. Per DOM die Komplette Liste löschen und die Optionen ausblenden, wobei mir die letzter "seltsam" anmutet.

Danke für die Antworten!!!

[Rouven]

Hello,

ein möglicher Workaround wäre: mittels DOM die alte Selectbox entfernen und an ihrer Stelle eine neue, damit leere, einfügen.

MfG
Rouven

[Joachim]

Hi,

Mit folgende Code wollte ich die Liste löschen...

clonen, ersetzen und nur die gewünschten optionen anfügen?

Gruesse, Joachim

[Markus]

Clonen? Ersetzen?

wie genau geht das?

Meine Form heist   : form
Mein Select-Objejt : mat_select

Danke vorab...

[Joachim]

Hi,

wie genau geht das?

Erzeuge einen (leeren) Clone des Elements (Parameter: false)
http://de.selfhtml.org/javascript/objekte/node.htm#clone_node
Ersetze Element durch Clone
http://de.selfhtml.org/javascript/objekte/node.htm#replace_child
ggf die ID wieder neu zuweisen. Ich habe das mit selects noch nicht getestet, sollte aber klappen.

Gruesse, Joachim

[Markus Treiber]

Danke für die Links...

habe folgendes probiert aber leider kommt immer die Meldung, dass das Objekt (letzte Zeile) nicht gefunden wird...

Meine Form heisst  : form
Mein Select-Object : mat_select

var formObj =  document.forms["form"];
var oldSelObj = formObj.elements["mat_select"];
var newSelObj = document.createElement("select");
newSelObj.setAttribute("id", oldSelObj.id);
oldSelObj.form.replaceChild(newSelObj, oldSelObj);

Sehe ich den Wald vor lauter Bäumen nicht ???

[plan_B]

Hallo,

habe folgendes probiert aber leider kommt immer die Meldung, dass das Objekt (letzte Zeile) nicht gefunden wird...

Meine Form heisst  : form
Mein Select-Object : mat_select

var formObj =  document.forms["form"];
var oldSelObj = formObj.elements["mat_select"];
var newSelObj = document.createElement("select");
newSelObj.setAttribute("id", oldSelObj.id);

der Idname darf nur einmal verwendet werden, also erst später zuweisen.

var tmp_idname=oldSelObj.id;
oldSelObj.form.replaceChild(newSelObj, oldSelObj);
oldSelObj.id="";
newSelObj.Id=tmp_idname;

was macht man mit dem alten Knoten? muss er noch abgebaut werden?

Gruß plan_B

[plan_B]

Hallo,

streiche, was ich früher geschrieben habe, das Verfahren klappt einwandfrei.
zum Testen lass lieber den IE weg. Meine IE-Version funktioniert dann nicht mehr, wenn das neue dynamisch erzeugte Element mit Namen angesprochen werden soll. Das ist/war? ein IE-Bug.
Möglich, dass das auch bei dir die Fehlerursache war oder
du bist mit "id" und "name" durcheinander gekommen
oder ...??

  
<html>  
<head><title>test</title>  
  
<script type="text/javascript">  
  
zm=0;  
function zeitmarke(z) {  
 return (new Date()).getTime() -z;  
 }  
  
function init_sel(sel_name) {  
 var imax=parseInt(prompt("wieviele Optionen erzeugen ","7000"));  
 if (imax>0)  
 with (document.forms.f1[sel_name]) {  
  zm=zeitmarke(0);  
  log("0ms","start init");  
  for (var i=1;i<imax;i++) {  
   var o=new Option();  
   o.value=""+i;  
   o.text=""+(i*i)  
   options[options.length]=o;  
   }  
  log(""+zeitmarke(zm)+"ms",""+ options.length+" Optionen verfügbar "+sel_name );  
  }  
  return false;  
 }  
  
function new_sel(frm,oldselname) {  
 var filter=prompt("Welche Zahlenfolge filtern","678");  
 if (filter) {  
  zm=zeitmarke(0);  
  log("0ms","start filter");  
  var sneu=document.createElement("select");  
  var salt=frm.elements[oldselname];  
  for( var i=0;i<salt.options.length;i++) {  
   if (salt.options[i].text.indexOf(filter)>-1) {  
    var o=new Option();  
    o.value=salt.options[i].value;  
    o.text=salt.options[i].text;  
    sneu.options[sneu.options.length]=o;  
    }  
   }  
  sneu.id=salt.id;  
  salt.form.replaceChild(sneu,salt);  
  sneu.onchange=salt.onchange;  
  sneu.name=salt.name;  
  log(""+zeitmarke(zm)+"ms","fertig new_sel");  
  log(""+zeitmarke(zm)+"ms","id finden :"+document.getElementById(salt.id).id);  
  }  
 return false;  
 }  
  
function change(elem){  
 var op=elem[elem.selectedIndex];  
 log("","onchange: "+op.value+"\t"+op.text+"\n");  
 return false;  
 }  
  
function log(z,x) {  
 document.forms.f1.TA.value=""+z+"\t"+x+"\n"+document.forms.f1.TA.value;  
 }  
</script>  
  
</head>  
<body  onload='init_sel("Auswahl")'>  
<h1>test select ersetzen</h1>  
<form name="f1" action="javascript:void()">  
  
<select name="Auswahl" id="Auswahlid" onchange="change(this)">  
<option value="test">hallo</option>  
</select>  
  
<button type=button onclick="return new_sel(this.form,'Auswahl')">new select</button>  
<textarea name="TA" cols=50 rows=10></textarea>  
</form>  
</body>  
</html>  
  

Gruß plan_B

[Markus Treiber]

Hallo Plan_B,

danke für deine Mühen und für das wirklich gute Beispiel.
Das Beispiel funktioniert bei mir einwandfrei auf IE und MOZ. Auch das Performance-Problem lässt sich hierbei (beim Aufbau der Knoten) sehr gut beobachten.

Wenn ich nun das Beispiel auf mein Skript übertrage, passiert das Gleiche wie bisher, und zwar kommt die Meldung

"Node not found"

in folgender Zeile:
salt.form.replaceChild(sneu,salt);

Ich poste am besten mal die definition der form und des selects

<form name="form0" id="form0" onSubmit="return false;"><br>
<select name="mat_select" id="mat_select" onchange="...">

Ich habe extra sowohl die Attribute name und id genutzt, um sicher zu gehen, dass ich dabei nix vergesse, aber es geht nich...

Noch eine Idee?

[plan_B]

Hallo,

"Node not found"

in folgender Zeile:
salt.form.replaceChild(sneu,salt);

Noch eine Idee?

wenn du nicht weisst welcher Knoten mit "Node" gemeint ist, musst du es herausfinden.
Ich würde mir eine info_node(node)-Funktion bauen, die Name, id und nodeType abfragt.

die Abfrage an verschiedenen Stellen einsetzen ...

Gruß plan_B