| | | | |
| |||||||
| Tutorials Hier findest Du Tutorials, welche nach und nach ein fertiges Script ergeben. Sehen, lernen & verstehen! |
 |
| | LinkBack (16) | Themen-Optionen | Thema bewerten |
12.02.2007, 23:46
| |
| Erfahrener Benutzer Registriert seit: 21.05.2008
Beiträge: 9.937
 |  HTML/JavaScript: Verschachtelte Auswahlfelder Hallo, lange Rede kurzer Sinn, habe eben in einen anderen Forum diesen Code-Schnipsel gepostet, der kann eigentlich auch gleich hier ins Tutorial, weil die Frage so oft vorkommt. Und zwar: Wie mache ich das, dass eine <select> Auswahl eine weitere <select> Auswahl anzeigt, deren Daten direkt von der Auswahl abhängen. Code: <html>
<head>
<title></title>
<script type="text/javascript">
var mygroup = new Array();
// reset
mygroup[0] = new Array();
mygroup[0][0] = new Option("Bitte wählen Sie zunächst eine Sprache.", 0);
// deutsch
mygroup[1] = new Array();
mygroup[1][0] = new Option("eins", 2);
mygroup[1][1] = new Option("zwei", 4);
mygroup[1][2] = new Option("drei", 8);
// englisch
mygroup[2] = new Array();
mygroup[2][0] = new Option("one", 1);
mygroup[2][1] = new Option("two", 3);
mygroup[2][2] = new Option("three", 9);
// spanisch kann ich nicht
// französisch (eigentlich auch nicht)
mygroup[40] = new Array();
mygroup[40][0] = new Option("un", 5);
mygroup[40][1] = new Option("deux", 50);
mygroup[40][2] = new Option("trois", 500);
// 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;
}
}
// übergebenes Element (sub-<select>) deaktivieren
function DisableSubSelect(elem)
{
elem.disabled = 1;
}
// übergebenes 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 ausgewählte value 0? dann sub-<select> deaktivieren
if (i == 0) {
DisableSubSelect(s);
} else {
EnableSubSelect(s);
}
}
function InitSubSelect()
{
// leeres sub-<select> mit mygroup[0] füllen
ShowSubSelect(document.forms["myform"].elements["myselect"], "mysubselect");
}
</script>
</head>
<body onload="InitSubSelect()">
<form action="" method="get" name="myform">
<select name="myselect" onchange="ShowSubSelect(this,'mysubselect')">
<option value="0">Bitte wählen Sie eine Sprache.</option>
<option value="1">deutsch</option>
<option value="2">englisch</option>
<option disabled="disabled" value="3">spanisch</option>
<option value="40">französisch</option>
</select>
<select name="mysubselect" disabled="disabled">
</select>
<input type="submit" />
</form>
</body>
</html>
Einfach den JavaScript-Array mygroup mit einer PHP-Schleife generieren. Die 1. Dimension von mygroup steht für den Primärschlüssel der 1. Auswahl. Er muss nicht fortlaufend sein. Die 2. Dimension von mygroup ist eine fortlaufenden Zahl, beginnend mit 0 (also einfach den PHP-Schleifen-Zähler reinbraten). new Option(text, value) text steht hierbei für den sichtbaren Text im sub-<select>, value könnte der Primärschlüssel einer verlinkten Tabelle des Haupt-<select> sein (er muss auch nicht fortlaufend sein). Einfach auf submit klicken und testen, was für Werte bei welcher Auswahl ankommen. Bei Fragen, bitte direkt posten, damit ich Unklarheiten auch im Skript ausräumen kann. Edit: Bitte auch diese Neufassung einer verschachtelten Auswahl beachten: http://www.php.de/tutorials/43433-ht...tml#post468567 (HTML/JavaScript: Verschachtelte Auswahlfelder) Geändert von Chriz (14.11.2009 um 01:22 Uhr). |
|  |
 | |
| PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten | |
|
26.02.2007, 13:33
| |
| moderatives Dielektrikum  Registriert seit: 21.05.2008
Beiträge: 34.248
PHP-Kenntnisse: Fortgeschritten  | Zumindest im IE funktioniert das disabled auf option nicht, deswegen hagelts ob der fehlenden spanischen Arraydefinition ne JS Fehlermeldung. Dabei wiederum wird deutlich, dass beim Löschen der Einträge ein Fehler auftritt. Der zweite Eintrag bleibt stehen. Ich denke, das liegt daran, dass sich beim NULL setzen der Eigenschaft option automatisch der Wert für options.length ändert und so den Schleifendurchlauf beeinflusst. Abhilfe schafft die Ersetzung durch folgendes Fragment: Code: var l = e.options.length;
for (var i = 0; i < l; i++) {
e.options[0] = null;
}
Code: e.options.length = 0; |
|
| |
|
26.02.2007, 14:31
| |
| Erfahrener Benutzer Registriert seit: 21.05.2008
Beiträge: 9.937
| Danke für den Hinweis, ich bau es die nächsten Tage um. |
|
| |
|
24.06.2008, 11:59
| |
| Moderator  Registriert seit: 13.02.2008
Beiträge: 6.816
PHP-Kenntnisse: Fortgeschritten | Du solltest dir auch noch was überlegen bezüglich voreingestellten Werten und behalten des eingestellten subselect-wertes. Sowohl der IE7 als auch der FF3 kommen bei deinem Beispiel damit durcheinander, auch wenn ich noch keinen nachvollziehbaren Grund dafür gefunden habe... Beispiel: - Seite mit deinem Script frisch geladen - man klick auf "Deutsch" => Subwert ist automatisch "eins" - man klick auf "Englisch" => Subwert ist automatisch "one" - man klick nochmal auf "Deutsch" => Subwert ist automatisch "zwei" - man klick nochmal auf "Englisch" => Subwert ist automatisch "two" Ich habe also den mysubselect nie berührt und trotzdem haben sich die Werte geändert  |
|
| |
|
24.06.2008, 12:36
| |
| moderatives Dielektrikum Registriert seit: 21.05.2008
Beiträge: 34.248
PHP-Kenntnisse: Fortgeschritten | Vielleicht hängt das mit der Sache zusammen, die ich als Anmerkung gepostet habe? Existiert evl. gar keine 1. Eintrag? |
|
| |
|
25.02.2009, 17:53
| |
| Neuer Benutzer Registriert seit: 25.02.2009
Beiträge: 4
| Kann man auch 3 mal die Selbe Abfrage stellen unter anderen select names mit den selben auswahlen?? |
|
| |
|
25.02.2009, 17:56
| |
| moderatives Dielektrikum Registriert seit: 21.05.2008
Beiträge: 34.248
PHP-Kenntnisse: Fortgeschritten | Na klar.
__________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. -- |
|
| |
|
25.02.2009, 19:01
| |
| Neuer Benutzer Registriert seit: 25.02.2009
Beiträge: 4
| @ nikosch kannst du mir vieliecht auch einen kleinen tipp geben wie?? weil wenn ich es versuche dann zeigt mir <select name="mysubselect" disabled="disabled"> </select> nichts mehr an |
|
| |
|
25.02.2009, 19:06
| |
| moderatives Dielektrikum Registriert seit: 21.05.2008
Beiträge: 34.248
PHP-Kenntnisse: Fortgeschritten | Beschreib mal noch mal die Problemstellung
__________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. -- |
|
| |
|
26.02.2009, 15:03
| |
| Neuer Benutzer Registriert seit: 25.02.2009
Beiträge: 4
| habe es dir mla hochgeladen wie es sein sollte, nur das die 2 Auswahl halt weiter unten sein soll Bestellformular Online 1. und so sieht es bei mir immer wieder aus: Bestellformular Online 2 Geändert von iceman587 (26.02.2009 um 15:07 Uhr). |
|
| |
| |
| Themen-Optionen | |
| Thema bewerten | |
|
|
Ähnliche Themen | ||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| JS Verschachtelte Auswahlfelder | loki0815 | HTML, Usability und Barrierefreiheit | 2 | 26.06.2008 18:52 |
| verschachtelte Rubriken ausgeben / alle anzeigen | prinzli | PHP Tipps 2008 | 3 | 25.02.2008 22:37 |
| Verschachtelte JOINs ... Ergebnis abziehen ... | tomfrit | Datenbanken | 2 | 10.12.2007 08:14 |
| Verschachtelte DB-Anfrage richtig? | Bart | Datenbanken | 1 | 21.05.2006 18:58 |
| [CSS] Verschachtelte Div Container - Breite anpassen | I-Spy | HTML, Usability und Barrierefreiheit | 7 | 14.05.2006 11:51 |
| Verschachtelte Abfrage über mehrere Tables hinweg? | php_frage | Datenbanken | 9 | 29.04.2006 19:55 |
| Verschachtelte Includes | FoXyLiOn | PHP-Fortgeschrittene | 3 | 12.02.2006 15:24 |
| Verschachtelte Datenbankabfrage - wie fange ich an? | PHP Tipps 2007 | 9 | 02.02.2006 11:09 | |
| verschachtelte Abfrage | PHP Tipps 2005-2 | 12 | 20.08.2005 20:28 | |
| verschachtelte if-else anweisung!? | PHP Tipps 2005-2 | 7 | 04.08.2005 11:53 | |
| 2 verschachtelte while Schleifen. Großes Performanceproblem | Datenbanken | 3 | 30.05.2005 12:52 | |
| verschachtelte MySQL-Abfrage | PHP Tipps 2005 | 3 | 04.05.2005 12:44 | |
| [Erledigt] Auswahlfelder | HTML, Usability und Barrierefreiheit | 3 | 17.01.2005 10:31 | |
| [Erledigt] Verschachtelte Arrays ausgeben | PHP-Fortgeschrittene | 2 | 10.12.2004 11:29 | |
| 2 verschachtelte Divlayer und der Firefox. | Tutti | HTML, Usability und Barrierefreiheit | 2 | 26.07.2004 22:24 |
Dieser Inhalt ist unter einer Creative Commons-Lizenz lizenziert.
