nicht angemeldet
Dynamische Select Boxen und IE
StruppiHallo,
ich kenne mich mit JavaScript nur wenig aus und habe ein Script von Dr.Web erweitert.
Es gibt hier drei Select-Boxen. Der Inhalt der zweiten wird der Auswahl der ersten Box entsprechend angepasst. Wenn ich dann die Auswahl in der zweiten Box treffe wird der Inhalt in der dritten entsprechend angepasst.
Das was mich wurmt: es funktioniert in allen Browsern nur auf dem IE 6 funktioniert es nicht richtig. Nach Auswahl in der zweiten Box ist die dritte Box *leer*!! Wenn es gar nicht funktionieren würde würde mich das weniger wurmen ;)
Die JavaScript Konsole sagt es gibt keine Fehler und das HTML ist Valide. Hier könnt ihr euch das Beispiel ansehen:
http://www.zschille.net/dynamische-auswahlliste.htm
Und hier der ganze Code:
--------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Dynamische Auswahlliste</title>
<script language="Javascript" type="text/javascript">
<!--
function update_auswahl()
{
var kategorieAuswahl = document.forms.verzeichnis.kategorie;
var unterkategorieAuswahl = document.forms.verzeichnis.unterkategorie;
var unterunterkategorieAuswahl = document.forms.verzeichnis.unterunterkategorie;
unterkategorieAuswahl.options.length = 0; // DropDown Menü entleeren
unterunterkategorieAuswahl.options.length = 0; // DropDown Menü 2 entleeren
if (kategorieAuswahl.options
[kategorieAuswahl.selectedIndex].
value == "Hund")
{
unterkategorieAuswahl.options[0] = new Option("Futter wählen");
unterkategorieAuswahl.options[1] = new Option("HundeFutter");
unterkategorieAuswahl.options[2] = new Option("Pedigree Pal");
}
else if (kategorieAuswahl.options
[kategorieAuswahl.selectedIndex].
value == "Katze")
{
unterkategorieAuswahl.options[0] = new Option("Futter wählen");
unterkategorieAuswahl.options[1] = new Option("Kitekat");
unterkategorieAuswahl.options[2] = new Option("Brekkies");
}
else if (kategorieAuswahl.options
[kategorieAuswahl.selectedIndex].
value == "Maus")
{
unterkategorieAuswahl.options[0] = new Option("Futter wählen");
unterkategorieAuswahl.options[1] = new Option("Mais");
unterkategorieAuswahl.options[2] = new Option("Speck");
}
}
function update_auswahl_2()
{
var unterkategorieAuswahl = document.forms.verzeichnis.unterkategorie;
var unterunterkategorieAuswahl = document.forms.verzeichnis.unterunterkategorie;
//unterunterkategorieAuswahl.options.length = 0; // DropDown Menü 2 entleeren
if (unterkategorieAuswahl.options
[unterkategorieAuswahl.selectedIndex].
value == "HundeFutter")
{
unterunterkategorieAuswahl.options[0] = new Option("Hundelekker");
unterunterkategorieAuswahl.options[1] = new Option("Schmakko");
}
else if (unterkategorieAuswahl.options
[unterkategorieAuswahl.selectedIndex].
value == "Pedigree Pal")
{
unterunterkategorieAuswahl.options[0] = new Option("Pedi-Supi");
unterunterkategorieAuswahl.options[1] = new Option("Ein ganzer Kerl");
}
else if (unterkategorieAuswahl.options
[unterkategorieAuswahl.selectedIndex].
value == "Brekkies")
{
unterunterkategorieAuswahl.options[0] = new Option("Brekki-Supi");
unterunterkategorieAuswahl.options[1] = new Option("Knusprig");
}
else if (unterkategorieAuswahl.options
[unterkategorieAuswahl.selectedIndex].
value == "Kitekat")
{
unterunterkategorieAuswahl.options[0] = new Option("Katzischmatzi");
unterunterkategorieAuswahl.options[1] = new Option("Kitti");
}
else if (unterkategorieAuswahl.options
[unterkategorieAuswahl.selectedIndex].
value == "Mais")
{
unterunterkategorieAuswahl.options[0] = new Option("Maisischmatzi");
unterunterkategorieAuswahl.options[1] = new Option("Popcorn");
}
else if (unterkategorieAuswahl.options
[unterkategorieAuswahl.selectedIndex].
value == "Speck")
{
unterunterkategorieAuswahl.options[0] = new Option("Mausespeck");
unterunterkategorieAuswahl.options[1] = new Option("Fett");
}
}
//-->
</script>
</head>
<body>
<form name="verzeichnis" action="mailto:info@domain.de">
<select size="1" name="kategorie" onchange="update_auswahl()">
<option value="Hund" selected>Hund</option>
<option value="Katze">Katze</option>
<option value="Maus">Maus</option>
</select>
<select size="1" name="unterkategorie" onchange="update_auswahl_2()">
<option selected>bitte wählen</option>
<option>HundeFutter</option>
<option>Brekkies</option>
<option>MauseFutter</option>
</select>
<select size="1" name="unterunterkategorie">
<option selected></option>
<option>bellen</option>
<option>miauen</option>
<option>piiiepsen</option>
</select>
<input type="submit" value="Senden">
</form>
</body>
</html>
-----------------------------------------------
Weiss jemand wo hier der Fehler liegt?
Vielen Dank für die Hilfe im vorraus!
Liebe Grüße,
Daviz
-
hi,
Das was mich wurmt: es funktioniert in allen Browsern nur auf dem IE 6 funktioniert es nicht richtig. Nach Auswahl in der zweiten Box ist die dritte Box *leer*!!
Kurzes, simples Debugging bringt die Erkenntnis, dass der IE zu den dynamisch erstellten Options in deinem zweiten Select kein Value hat - es ist einfach leer.
Das liegt wohl daran, dass du beim Erstellen der Options nur den ersten Parameter für den Text angegeben hast, aber keinen zweiten für Value.
Ich nehme mal an, dass ein Browser hier analog zu Definition von Options in HTML handeln sollte - wenn kein Value angegeben, dann nimm den Text als Value - macht der IE aber nicht.Du könntest also entweder in deiner zweiten Update-Funktion nicht auf .value der selektierten Option abfragen, sondern auf .text - oder du gibst beim dynamischen Erzeugen der Options auch Value noch explizit als zweiten Parameter mit.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Du könntest also entweder in deiner zweiten Update-Funktion nicht auf .value der selektierten Option abfragen, sondern auf .text
Ja! Das funktioniert!! :)
Ich habe in allen Abfragen das >>value == "Hund"<< durch >>text == "Hund"<< ersetzt.
Vielen Dank für die schnelle Antwort!!
Wer Ahnung hat ist klar im Vorteil ;-)
Viele liebe Grüße,
Daviz-
Hallo Daviz
Ich habe in allen Abfragen das >>value == "Hund"<< durch >>text == "Hund"<< ersetzt.
dir ist bewusst, dass du den value spätestens beim Verschicken eines Formulares brauchst?
Viele Grüße,
Jochen
-
dir ist bewusst, dass du den value spätestens beim Verschicken eines Formulares brauchst?
Nö, braucht er nicht: ...action="mailto:info@domain.de">
Struppi.
-
Hallo.
...action="mailto:info@domain.de">
Na, da wird sich ja jemand freuen.
MfG, at-
...action="mailto:info@domain.de">
Na, da wird sich ja jemand freuen.
Wenn ich mir das genau anschaue, trifft keinen Falschen.
Struppi.
-
Hallo.
Wenn ich mir das genau anschaue, trifft keinen Falschen.
So gesehen ...
MfG, at-
Wenn ich mir das genau anschaue, trifft keinen Falschen.
So gesehen ...
??
Sarkasmus ?-)
Grüße, Daviz
-
Hallo.
Sarkasmus ?-)
Ich habe das Wort gerade nachgeschlagen, bin mir noch nicht ganz sicher.
MfG, at
-
-
-
-
-
-
-
-
-
Hallo Daviz,
es funktioniert in allen Browsern nur auf dem IE 6 funktioniert es nicht richtig
in allen?
unterkategorieAuswahl.options[1] = new Option("HundeFutter");
unterkategorieAuswahl.options[2] = new Option("Pedigree Pal");hier setzt du den _Text_ der Auswahlliste
if (unterkategorieAuswahl.options[unterkategorieAuswahl.selectedIndex].value == "HundeFutter")
[...]
else if (unterkategorieAuswahl.options[unterkategorieAuswahl.selectedIndex].value == "Pedigree Pal")hier prüfst du den _Value_ der Auswahlliste
Siehe http://de.selfhtml.org/javascript/objekte/options.htm#neue_elemente
Der zweite optionale Parameter ist hilfreich.Viele Grüße,
Jochen
P.S: mich wundert, dass FF das so schluckt.
-
ich kenne mich mit JavaScript nur wenig aus und habe ein Script von Dr.Web erweitert.
Weil ich grad Zeit hatte:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Dynamische Auswahlliste</title> <script type="text/javascript"> function update_auswahl(form) { var kategorieAuswahl = form.kategorie; var unterkategorieAuswahl = form.unterkategorie; var unterunterkategorieAuswahl = form.unterunterkategorie; var wahl = kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value; var def = 'Futter wählen'; var options = { Hund: [def, "HundeFutter", "Pedigree Pal"], Katze: [def, "Kitekat", "Brekkies"], Maus: [ def, "Mais", "Speck"] }; setAuswahl(unterkategorieAuswahl, wahl, options, def); if( options[wahl] ) unterunterkategorieAuswahl.options.length = 0; // DropDown Menü 2 entleeren } function update_auswahl_2(form) { var unterkategorieAuswahl = form.unterkategorie; var unterunterkategorieAuswahl = form.unterunterkategorie; var wahl = unterkategorieAuswahl.options[unterkategorieAuswahl.selectedIndex].value; var options = { HundeFutter: ["Hundelekker", "Schmakko"], 'Pedigree Pal': ["Pedi-Supi", "Ein ganzer Kerl"], Brekkies: [ "Brekki-Supi", "Knusprig"], Kitekat: [ "Katzischmatzi", "Kitti"], Mais: ["Maisischmatzi", "Popcorn"], Speck: ["Mausespeck", "Fett"] }; setAuswahl(unterunterkategorieAuswahl, wahl, options); } function setAuswahl(feld, wahl, options, def) { if(!options[wahl]) return; if(!def) def = ''; feld.options.length = 0; // DropDown Menü entleeren for(var i = 0; i < options[wahl].length; i++) { feld.options[i] = new Option(options[wahl][i], options[wahl][i], false, (def == options[wahl][i]) ); } if(!def) feld.selectedIndex = 0; } </script> </head> <body> <form name="verzeichnis" action="mailto:info@domain.de"> <select size="1" name="kategorie" onchange="update_auswahl(this.form)"> <option value="Hund" selected>Hund</option> <option value="Katze">Katze</option> <option value="Maus">Maus</option> </select> <select size="1" name="unterkategorie" onchange="update_auswahl_2(this.form)"> <option selected>bitte wählen</option> <option>HundeFutter</option> <option>Brekkies</option> <option>MauseFutter</option> </select> <select size="1" name="unterunterkategorie"> <option selected></option> <option>bellen</option> <option>miauen</option> <option>piiiepsen</option> </select> <input type="submit" value="Senden"> </form> </body> </html>Struppi.