nicht angemeldet
Abhänige Dropdownlisten
Hallo zusammen
ich habe versucht in mein Skript mit Javascript abhängige Dropdownfelder umzusetzen.
Jedoch hab ich noch folgendes Problem
Die 2. Dropdownbox wird nicht gefüllt
Hier mein Code:
...
<script type="text/javascript">
<!--
<?php
// abhängiges Kombifeld erzeugen
$rs=mysql_query(" select * from tbl_artikel;") or die(mysql_error());
$rows=mysql_num_rows($rs);
echo "\tvar liste2=new Array($rows)\n"
. "\tfor(var i=0;i<liste2.length;i++)\n"
. "\t\tliste2[i]=new Array(2);\n";
$n=0;
while($zeile=mysql_fetch_assoc($rs)) {
echo "\tliste2[$n][0]=".$zeile['art_id'].";\n"
. "\tliste2[$n][1]='".$zeile['art_bez']."';\n"
. "\tliste2[$n][2]=".$zeile['art_grp'].";\n";
$n++;
}
?>
function update_drp2() {
var x=document.frm_auswahl.drp2.length;
for(var n=0; n<x; n++)
document.frm_auswahl.drp2.options[0]=null;
for(n=0; n<liste2.length; n++) {
if(liste2[n][2]==document.frm_auswahl.drp1.value) {
var NeuerEintrag=new Option(liste2[n][1], liste2[n][0]);
document.frm_auswahl.drp2.options[document.frm_auswahl.drp2.length]=NeuerEintrag;
}
}
}
-->
</script>
</head>
<body>
...
<td width="70%" colspan="2" bgcolor="#ffffff"><div align="left">
<form name="frm_auswahl">
<select name="drp1" size="1" onChange="update_drp2()" class="input" style="WIDTH: 300px">
<?php
$rs=mysql_query("select * from tbl_art_gruppe") or die(mysql_error());
while($zeile=mysql_fetch_assoc($rs)) {
echo "<option value="".$zeile['art_grp_id']
. "">".$zeile['art_gruppe']."</option>\n";
}
?>
</select>
</div></td>
</tr>
<tr>
<td width="30%" bgcolor="#e7e7e7" class="td"><div align="left">Art</div></td>
<td width="70%" colspan="2" bgcolor="#ffffff"><div align="left">
<select name="drp2" size="1" class="input" style="WIDTH: 300px">
<option>Start</option>
</select>
</form>
<script type="text/javascript">
update_drp2()
</script>
Im Browser wird kein gelbes Dreieck unten links angezeigt, nur wenn ich in der 1. Dropbox
den Eintrag ändere kommt unten links ein gelbes Dreieck der auf folgende Zeile Verweist
var x=document.frm_auswahl.drp2.length;
Kann mir dabei evtl jemand helfen den Fehler zu beheben ?
Weiß denn keiner von euch einen Rat ?
-
Liebe(r) mgoertz,
var x=document.frm_auswahl.drp2.length;
for(var n=0; n<x; n++)
document.frm_auswahl.drp2.options[0]=null;Warum lässt Du n-mal options[0] mit null befüllen? Du meintest sicherlich
document.frm_auswahl.drp2.options[n]=null;Damit hat Deine select-Box namens "drp2" entweder keine options mehr, oder aber sie hat alle options noch - diese aber sind leer. Warum killst Du nicht einfach alle vorhandenen options z.B. (ungetestet!) mit
"document.frm_auswahl.drp2.length=0;" ?for(n=0; n<liste2.length; n++) {
if(liste2[n][2]==document.frm_auswahl.drp1.value) {
var NeuerEintrag=new Option(liste2[n][1], liste2[n][0]);
document.frm_auswahl.drp2.options[document.frm_auswahl.drp2.length]=NeuerEintrag;Verstehe nicht, warum Du hier statt [document.frm_auswahl.drp2.length] nicht einfach eine leere eckige Klammer nimmst, die automatisch den nächsthöheren Index nimmt und den Wert hineinschreibt:
document.frm_auswahl.drp2.options[]=NeuerEintrag;Wenn Du mit Firefox Deine Seite laden lässt, dann kann er Dir in seiner Javascript-Konsole sehr aussagekräftige Javascript-Fehlerbeschreibungen geben... Dieser Browser lohnt sich wirklich!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hallo Felix,
ich hab nun mal deine Änderungen an meinem Skript durchgeführt, aber bin leider nicht zu dem gewünschten Ergbnis gekommen
Hier mal die Ausgabe der Seite
http://www.mgoertz.de/test/as/test2.php
Hast du mir evtl noch nen Tip an was es liegen kann, bin leider in JavaScript noch ein Anfänger?
-
Liebe(r) mgoertz,
in Deiner Seite sehe ich ein verschachteltes <form>-Tag. Das ist böse, böse, böse! Dir reicht ein einziges <form>. Wirklich.
Meine Empfehlung bezüglich "objekt.options[]=wert;" muss ich zurücknehmen. Das habe ich mit PHP verwechselt. Da kann man sowas machen. Mea maxima culpa.
Nun erlaube ich mir Deinen Code etwas verfeinert zurück zu posten.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>TITEL</title> <link rel="stylesheet" type="text/css" href="includes/style.css"> <script type="text/javascript">var liste2 = new Array(); liste2 = [ [1, 'Webapplication', 1], [2, 'Homepageskripte', 1], [3, 'Webapplication', 2], [4, 'Intranet', 2], [5, 'Homepage', 2], [6, 'Intranet', 1], [7, 'Schulungsunterlagen', 2] ]; function update_drp2() { var x = document.frm_auswahl.drp2.length; for(var n=0; n<x; n++) document.frm_auswahl.drp2.options[0]=null; for(n=0; n<liste2.length; n++) { if(liste2[n][2]==document.frm_auswahl.drp1.value) { var NeuerEintrag=new Option(liste2[n][1], liste2[n][0]); document.frm_auswahl.drp2.options[document.frm_auswahl.drp2.length] = NeuerEintrag; } } }</script> </head> <body onload="update_drp2();"> <form name="frm_auswahl" action="" method="post"> <table width="90%" bgcolor="#0000CC" border="0" cellpadding="5" cellspacing="1" align="center"> <tr> <td colspan="3" class="tableheader"><div align="left">Artikel anlegen</div></td> </tr> <tr> <td width="30%" bgcolor="#e7e7e7" class="td"><span align="left">Gruppe</span></td> <td width="70%" colspan="2" bgcolor="#ffffff"><span align="left"> <select name="drp1" size="1" onChange="update_drp2()" class="input" style="WIDTH: 300px"> <option value="1">Dienstleistung</option> <option value="2">Software</option> </select></span></td> </tr> <tr> <td width="30%" bgcolor="#e7e7e7" class="td"><div align="left">Art</div></td> <td width="70%" colspan="2" bgcolor="#ffffff"><div align="left"> <select name="drp2" size="1" class="input" style="WIDTH: 300px"> <option>Start</option> </select> </td> </tr> <tr> <td width="30%" bgcolor="#e7e7e7" class="td"><div align="left">Bezeichnung</div></td> <td width="70%" colspan="2" bgcolor="#ffffff"><div align="left"><input style="WIDTH: 300px" tabindex=4 type="text" name="bezeichnung1" class="input"></div></td> </tr> <tr> <td width="30%" bgcolor="#e7e7e7" class="td"><div align="left">Menge</div></td> <td width="70%" colspan="2" bgcolor="#ffffff"><div align="left"><input style="WIDTH: 100px" tabIndex=5 type="text" name="menge1" class="input"></div></td> </tr> <tr> <td width="30%" bgcolor="#e7e7e7" class="td"><div align="left">Einheit</div></td> <td width="70%" colspan="2" bgcolor="#ffffff"><div align="left"><input style="WIDTH: 100px" tabIndex=6 type="text" name="einheit1" class="input"></div></td> </tr> <tr> <td width="30%" bgcolor="#e7e7e7" class="td"><div align="left">Mehrwertsteuersatz [%]</div></td> <td width="70%" colspan="2" bgcolor="#ffffff"><div align="left"><input style="WIDTH: 90px" tabIndex=7 type="text" name="mwst_satz1" class="inputkann"></div></td> </tr> <tr> <td width="30%" bgcolor="#e7e7e7" class="td"><div align="left">Status</div></td> <td width="70%" colspan="2" bgcolor="#ffffff"><div align="left"><input name="gueltig1" type="checkbox" class="input_kann" id="status" checked="checked"></div></td> </tr> <tr> <td colspan="3" class="tableheader"><div align="center"><input type="submit" name="senden" value="Anlegen" tabIndex=12 class="button"></div></td> </tr> </table> </form> </body> </html>Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Wunderbar jetzt funktioniert es.
Vielen Dank
-
-
-