5
JavaScript - Verschachteltes Auswahlfeld
Hallo Leute,
ich hab ein Problem mit einer verschachtelten Auswahl.
Ziel:
Wenn Auswahl1 getroffen wird, soll in Abhängigkeit die Auswahl2 zur Verfügung stehen.
Problem:
JavaScript scheint die Auswahl2 bei einer Neuauswahl von Auswahl1 nicht korrekt zu löschen. So dass teilweise (siehe M5 und M7) mehr Optionen zur Verfügung stehen, als im Script hinterlegt.
Ich hoffe ihr könnt mir helfen.
Danke & Gruß
ich hab ein Problem mit einer verschachtelten Auswahl.
Ziel:
Wenn Auswahl1 getroffen wird, soll in Abhängigkeit die Auswahl2 zur Verfügung stehen.
Problem:
JavaScript scheint die Auswahl2 bei einer Neuauswahl von Auswahl1 nicht korrekt zu löschen. So dass teilweise (siehe M5 und M7) mehr Optionen zur Verfügung stehen, als im Script hinterlegt.
Ich hoffe ihr könnt mir helfen.
Danke & Gruß
<html>
<head>
<title>Forumlar</title>
<script type="text/javascript">
var mygroup = new Array();
// reset
mygroup = new Array();
mygroup = new Option("Bitte waehlen Sie zunaechst einen Mandanten", 0);
mygroup[1] = new Array();
mygroup[1] = new Option("(10)", 10);
mygroup[1][1] = new Option("(40)", 40);
mygroup[1][2] = new Option("(50)", 50);
mygroup[1][3] = new Option("(60)", 60);
mygroup[1][4] = new Option("(95)", 95);
mygroup[2] = new Array();
mygroup[2] = new Option("(10)", 10);
mygroup[2][1] = new Option("(50)", 50);
mygroup[2][2] = new Option("(60)", 60);
mygroup[2][3] = new Option("(95)", 95);
mygroup[3] = new Array();
mygroup[3] = new Option("(10)", 10);
mygroup[3][1] = new Option("(50)", 50);
mygroup[3][2] = new Option("(60)", 60);
mygroup[3][3] = new Option("(95)", 95);
mygroup[4] = new Array();
mygroup[4] = new Option("(10)", 10);
mygroup[4][1] = new Option("(50)", 50);
mygroup[4][2] = new Option("(60)", 60);
mygroup[4][3] = new Option("(70)", 70);
mygroup[4][4] = new Option("(71)", 71);
mygroup[4][5] = new Option("(72)", 72);
mygroup[4][6] = new Option("(73)", 73);
mygroup[4][7] = new Option("(74)", 74);
mygroup[4][8] = new Option("(75)", 75);
mygroup[4][9] = new Option("(76)", 76);
mygroup[4][10] = new Option("(77)", 77);
mygroup[4][11] = new Option("(95)", 95);
mygroup[5] = new Array();
mygroup[5] = new Option("(00)", 00);
mygroup[6] = new Array();
mygroup[6] = new Option("(10)", 10);
mygroup[6][1] = new Option("(50)", 50);
mygroup[6][2] = new Option("(60)", 60);
mygroup[6][3] = new Option("(90)", 90);
mygroup[6][4] = new Option("(95)", 95);
mygroup[7] = new Array();
mygroup[7] = new Option("(00)", 00);
mygroup[8] = new Array();
mygroup[8] = new Option("(10)", 10);
mygroup[8][1] = new Option("(50)", 50);
mygroup[8][2] = new Option("(60)", 60);
mygroup[8][3] = new Option("(95)", 95);
mygroup[9] = new Array();
mygroup[9] = new Option("(10)", 10);
mygroup[9][1] = new Option("(50)", 50);
mygroup[9][2] = new Option("(60)", 60);
mygroup[9][3] = new Option("(95)", 95);
mygroup[10] = new Array();
mygroup[10] = new Option("(10)", 10);
mygroup[10][1] = new Option("(50)", 50);
mygroup[10][2] = new Option("(60)", 60);
mygroup[10][3] = new Option("(95)", 95);
mygroup[11] = new Array();
mygroup[11] = new Option("(10)", 10);
mygroup[11][1] = new Option("(50)", 50);
mygroup[11][2] = new Option("(60)", 60);
mygroup[11][3] = new Option("(95)", 95);
// mygroup[ZB_PRIMARY_KEY_SELECT][FORTLAUFENDE_ZAHLEN_AB_0] = new Option(OPTION_TEXT, ZB_PRIMARY_KEY_SUBSELECT)
// alle <option>s des sub-<select> entfernen
function ResetSubSelect(form, subSelect)
{
var e = form.elements[subSelect];
for (var i = 0; i < e.options.length; i++) {
e.options[i] = null;
}
}
// Uebergebenes Element (sub-<select>) deaktivieren
function DisableSubSelect(elem)
{
elem.disabled = 1;
}
// Uebergebenes Element (sub-<select>) aktivieren
function EnableSubSelect(elem)
{
elem.disabled = 0;
}
// tritt bei onchange in Kraft, bzw. bei der Initiierung
function ShowSubSelect(elem, subSelect)
{
// alle <option>s des sub-<select> entfernen (reset)
ResetSubSelect(elem.form, subSelect);
// welcher value wurde ausgewählt
var i = elem.options[elem.selectedIndex].value;
// sub-<select>
var s = elem.form.elements[subSelect];
// dem <sub>-select die <option>s aus mygroup zuordnen
for (var k = 0; k < mygroup[i].length; k++) {
s.options[k] = mygroup[i][k];
}
// war die ausgewaehlte value 0? dann sub-<select> deaktivieren
if (i == 0) {
DisableSubSelect(s);
} else {
EnableSubSelect(s);
}
}
function InitSubSelect()
{
// leeres sub-<select> mit mygroup füllen
ShowSubSelect(document.forms["Formular"].elements["mandant"], "rgkreis");
}
</script>
</head>
<body onload="InitSubSelect()">
<table>
<tr>
<td>
</td>
<td valign="top">
<h2>Formular</h2>
</td>
</tr>
</table>
<!-- Formular zur generierung der Daten -->
<form name="Formular" action="test.html" method="post">
<p>
Auswahl1:<br>
<select name="mandant" size="1" onchange="ShowSubSelect(this,'rgkreis')">
<option value="0">Bitte waehlen Sie einen Mandanten</option>
<option value=1>(01) - M1</option>
<option value=2>(02) - M2</option>
<option value=3>(03) - M3</option>
<option value=4>(04) - M4</option>
<option value=5>(05) - M5</option>
<option value=6>(06) - M6</option>
<option value=7>(07) - M7</option>
<option value=8>(08) - M8</option>
<option value=9>(09) - M9</option>
<option value=10>(10) - M10</option>
<option value=11>(11) - M11</option>
</select>
</p>
<p>
Auswal2:<br>
<select name="rgkreis" size="1" disabled="disabled">
</select>
</p>
<p>
Bitte geben Sie Ihren Namen (Vorname Nachname) ein:<br>
<input name="name" type="text" size="50" maxlength="100">
</p>
<p>
Bitte geben Sie den Grund an:<br>
<input name="grund" type="text" size="50" maxlength="100">
</p>
<p>
<input type="submit" value="Absenden">
</p>
</form>
</body>
</html>
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 192985
Url: https://administrator.de/contentid/192985
Ausgedruckt am: 22.11.2024 um 12:11 Uhr
5 Kommentare
Neuester Kommentar
Hallo pemi!
Versuchs mal mit -1 in Codezeile 96 (False=0, True=-1)?
Gruß Dieter
Versuchs mal mit -1 in Codezeile 96 (False=0, True=-1)?
Gruß Dieter
Hallo Dieter,
vielen Dank für deine Antwort. Aber leider bringt das keine Verbesserung.
Gruß
Michael
vielen Dank für deine Antwort. Aber leider bringt das keine Verbesserung.
Gruß
Michael
Hallo Pemi,
ich glaube dein "Reset" funktioniert gar nicht bzw. rufst du die Funktion mit falschen Parametern auf !
Ich habe da mal die relevanten Code-Zeilen (HTML und Javascript) zusammengestellt:
In diesen Abschnitten wird klar, das elem das <select>-Objekt "mandant" ist !
Beim Aufruf von "ResetSubSelect()" versuchst du interessanter weise auf das Objekt "form" des Objektes "elem/this/select" zuzugreifen... das nicht existiert.
this ist nicht "dieses Formular", sondern "dieses Elemente" also nur das <select>
So übergibst du der Reset-Funktion auch einen falschen Parameter der nicht weiterverarbeitet werden kann.
~Arano
ich glaube dein "Reset" funktioniert gar nicht bzw. rufst du die Funktion mit falschen Parametern auf !
Ich habe da mal die relevanten Code-Zeilen (HTML und Javascript) zusammengestellt:
<select name="mandant" size="1" onchange="ShowSubSelect(this,'rgkreis')">
function ShowSubSelect(elem, subSelect)
{
// ...
ResetSubSelect(elem.form, subSelect);
// ...
}Beim Aufruf von "ResetSubSelect()" versuchst du interessanter weise auf das Objekt "form" des Objektes "elem/this/select" zuzugreifen... das nicht existiert.
this ist nicht "dieses Formular", sondern "dieses Elemente" also nur das <select>
So übergibst du der Reset-Funktion auch einen falschen Parameter der nicht weiterverarbeitet werden kann.
~Arano
hi arano,
wie wäre es denn richtig?
gruß
wie wäre es denn richtig?
gruß
SO ! LÖSUNG !!!! :D
Vorweg, ich war bislang zu faul das ganze mal in eine Datei zu speichern und selber dran herum zu doktorn... kommt auch daher weil mir das Element-"form", welches scheinbar das Eltern Formular referenziert, noch nicht untergekommen ist und ich so einige "Fehler" mehr gesehen habe - die ich aber nicht alle selber beheben oder ansprechen wollte. Mein Fehler !
Ich finde auch auf die schnelle nichts zu "form"^, hast du was lesbares für mich ?
Nunja, jetzt habe ich das halt doch in eine Datei gespeichert und aufgerufen, bisschen hin bisschen her, 10 Minuten später gelöst.
Dein Logik die Elemente des SubSelects zu löschen ist nicht ganz korrekt !
Der Gedanke, ermittle die Anzahl der Elemente und lösche sie dann der Reiche nach. ist ja eigentlich nicht verkehr, ABER sobald das erste Element gelöscht ist stimmt die Anzahl der Elemente nicht mehr, ist ja jetzt eins WENIGER ;)
Oder besser gesagt, die Elemente rutschen von unten nach oben nach !
zum Beispiel:
Die hast ein Select mit 5 Elementen - index 0-4
(a,b,c,d,e)
Lösche Element, verbleiben 4, (b,c,d,e)
Lösche Element[1], verbleiben 3, (b,d,e)
Lösche Element[2], verbleiben 2, (b,d)
Lösche Element[3], ERROR Index 3 gibt es nicht mehr, es verbleiben 2 Elemente (b,d) mit den Indexen 0 und 1
Die Lösung ist also 5 mal das erste Element zu löschen, oder einfach hinten anzufangen
(a,b,c,d,e)
Lösche Element[4], verbleiben 4, (a,b,c,d)
Lösche Element[3], verbleiben 3, (a,b,c)
Lösche Element[2], verbleiben 2, (a,b)
Lösche Element[1], verbleiben 1, (a)
Lösche Element, verbleiben 0, ()
Dazu kommt die Verwirrung, dass die Elemente die beim fehlerhaften Löschen übergeblieben sind, komplett oder NUR teilweise mit den neuen Elementen überschrieben wurden.
Das sollte dein Problem nun gelöst haben
Ein schönes Wochenende
~Arano
Edit:
Okay, jetzt habe ich es doch gefunden, das "form" selfHTML - form
Nein, war mir bislang unbekannt das es solch eine Eigenschaft gibt.
*ding* wieder ein Stückchen schlauer geworden.
Vorweg, ich war bislang zu faul das ganze mal in eine Datei zu speichern und selber dran herum zu doktorn... kommt auch daher weil mir das Element-"form", welches scheinbar das Eltern Formular referenziert, noch nicht untergekommen ist und ich so einige "Fehler" mehr gesehen habe - die ich aber nicht alle selber beheben oder ansprechen wollte. Mein Fehler !
Ich finde auch auf die schnelle nichts zu "form"^, hast du was lesbares für mich ?
Nunja, jetzt habe ich das halt doch in eine Datei gespeichert und aufgerufen, bisschen hin bisschen her, 10 Minuten später gelöst.
Dein Logik die Elemente des SubSelects zu löschen ist nicht ganz korrekt !
function ResetSubSelect(form, subSelect)
{
var e = form.elements[subSelect];
for (var i = 0; i < e.options.length; i++) {
e.options[i] = null;
}
}Oder besser gesagt, die Elemente rutschen von unten nach oben nach !
zum Beispiel:
Die hast ein Select mit 5 Elementen - index 0-4
(a,b,c,d,e)
Lösche Element, verbleiben 4, (b,c,d,e)
Lösche Element[1], verbleiben 3, (b,d,e)
Lösche Element[2], verbleiben 2, (b,d)
Lösche Element[3], ERROR Index 3 gibt es nicht mehr, es verbleiben 2 Elemente (b,d) mit den Indexen 0 und 1
Die Lösung ist also 5 mal das erste Element zu löschen, oder einfach hinten anzufangen
(a,b,c,d,e)
Lösche Element[4], verbleiben 4, (a,b,c,d)
Lösche Element[3], verbleiben 3, (a,b,c)
Lösche Element[2], verbleiben 2, (a,b)
Lösche Element[1], verbleiben 1, (a)
Lösche Element, verbleiben 0, ()
function ResetSubSelect(form, subSelect)
{
var e = form.elements[subSelect];
for (var i=e.options.length; i>=0; i--)
e.options[i] = null;
}Dazu kommt die Verwirrung, dass die Elemente die beim fehlerhaften Löschen übergeblieben sind, komplett oder NUR teilweise mit den neuen Elementen überschrieben wurden.
Das sollte dein Problem nun gelöst haben
Ein schönes Wochenende
~Arano
Edit:
Okay, jetzt habe ich es doch gefunden, das "form" selfHTML - form
Nein, war mir bislang unbekannt das es solch eine Eigenschaft gibt.
*ding* wieder ein Stückchen schlauer geworden.
