Werte einer SelectBox abhängig von den Werten eines DropDowns ändern

quezo

quezo

Mitglied
Hi,

ich habe folgendes Problem:

Ich habe eine DropDownList und ein Select-Field. Ich möchte nun, dass sich die Werte im SelectField abhängig vom gewählten Wert der DropDownList ändern. Ich habe es schon soweit hinbekommen, dass es einigermaßen funzt. Allerdings werden die vorherigen Werte irgendwie nicht komplett gelöscht. Kann da jemand mal drüber gucken?

PHP: 
<html>
<head>
	<title>Test</title>
<script type="text/javascript" language="javascript">
<!--
elements = new Array();
 elements[1] = new Array("foo", "bar");
 elements[2] = new Array("bar");
 elements[3] = new Array("foo");
 
function change() {
 // vorhandene options aus Select-Field löschen
 var anzChilds = document.getElementById("elemList").childNodes.length;
 
 for(var i=0; i<anzChilds; i++) {
 	document.getElementById("elemList").removeChild(document.getElementById("elemList").childNodes[i]);
 }

 var chooserValue = document.getElementById("chooser").value;
 
 for(i=0; i<elements[chooserValue].length; i++) {
 	var newOption = document.createElement("option");
	
	// value-Attribut des OPTION-Tags erzeugen
	var optionValue = document.createAttribute("value");
	optionValue.nodeValue = elements[chooserValue][i];
	newOption.setAttributeNode(optionValue);
	
	// Daten zwischen <option></option> setzen
	var optionText = document.createTextNode(elements[chooserValue][i]);
	newOption.appendChild(optionText);
	
	document.getElementById("elemList").appendChild(newOption);
 }
 
}
//-->
</script>
</head>
<body>

<select size="1" name="chooser" id="chooser" onchange="change()">
 <option value="" selected="selected"> - Bitte ausw&auml;hlen - </option>
 <option value="1">Elem A</option>
 <option value="2">Elem B</option>
 <option value="3">Elem C</option>
</select>

<select size="4" name="elemList" id="elemList">
	<option>Bitte w&auml;hlen Sie zuerst etwas aus</option>
</select>

</body>
</html>
 
Hi,

bitte nie vergessen, dass select-Elemente immer Unterelemente eines form-Elementes sind. :)

Im Mozilla/NN6+ werden deine Anweisungen imho recht präzise ausgeführt, dein Problem mit dem Nichtauslöschen der vorigen Eintragungen trat bei mir eher im IE auf, da der noch kein echtes Verständnis aufbringt für das DOM, nach welchem du arbeitest.

Für den IE lässt sich jedoch ein einfacher workaround finden:
PHP: 
function change() {
    if (document.all) {
        document.formName.elemList.length = 0;
    } else{
        // vorhandene options aus Select-Field löschen
        var anzChilds = document.getElementById("elemList").childNodes.length;
        for(var i=0; i<anzChilds; i++) {
            document.getElementById("elemList").removeChild(document.getElementById("elemList").childNodes[i]);
        }
}

...

}
Wie sich's im Opera verhält kann ich leider nicht sagen, hab ich derzeit nicht installiert.

hth,
Geist
 
Hi Geist,

vielen Dank für die Hilfe. Im MSIE und Netscape funzt es prima. Nur der Opera will noch nicht.

Der Opera hat irgendwie das Problem, dass er die Funktion nicht aufrufen kann. Die Fehlermeldung meint, dass die Variable 'change' nicht gefunden werden kann. Die Funktion heißt aber so. Im onchange-Attribut habe ich den Funktionsaufruf mit onchange="change();" schon richtig drin.

Weißt du was das bedeutet?
 
Ich denke nicht, dass der Fehler beim Aufruf der Funktion auftritt, sondern schon eher bei den Abarbeiten der darin gegebenen Anweisungen.

Einen onChance-Handler dürfte selbst die Opera zustande bringen und auch an der Funktionsbenennung ist afaik nichts fälschlich. (change ist kein reserviertes Schlüsselwort der Engine oder dergleichen)

Dass die Variable nicht gefunden werden kann, würde ja auch evtl. auf eine falschen scopechain vermuten lassen, aber dass globale Variablen nicht gefunden werden, kann ich mir auch kaum vorstellen. :)
(deine Funktion wird global deklariert, oder?)

Auch in dem Browser wird es, so vermute ich, einige Komplikationen mit dem DOM geben, bis Opera 6.04 habe ich selbst noch getestet und dort wurde das wenigste der DOM-Richtlinien in der entsprechenden Engine umgesetzt.
Weiß nicht mit welcher Version du testest und ob diese eventuell schon wieder neu orientiert ist, was das DOM angeht, aber würde fast dahin tendieren, dass dort der Wurm drinsteckt.

Geist
 
Ich glaube auch, dass der Wurm irgendwo in der Funktion selbst steckt. Allerdings zeigen MSIE und Netscape keinerlei Fehler an.
Dann wird es, wie du schon sagtest, am Opera liegen. :(
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück