php.de

Zurück   php.de > php.de Intern > Wiki Diskussionsforum > Tutorials

Tutorials Hier findest Du Tutorials, welche nach und nach ein fertiges Script ergeben. Sehen, lernen & verstehen!

Thema geschlossen
 
LinkBack (22) Themen-Optionen
Alt 12.02.2007, 22:46  
Erfahrener Benutzer
 
Registriert seit: 21.05.2008
Beiträge: 9.934
Zergling-new wird schon bald berühmt werdenZergling-new wird schon bald berühmt werden
Standard 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>
Ich behaupte einfach mal, der Code ist größtenteils selbsterklärend, zumindest ist er auch für den Laien erweiterbar.

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 00:22 Uhr).
Zergling-new ist offline  
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 26.02.2007, 12:33  
Forenpolitikum
 
Registriert seit: 21.05.2008
Beiträge: 44.697
PHP-Kenntnisse:
Fortgeschritten
nikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehen
Standard

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;
              }
Im Normalfall funktioniert das Löschen der Select-Einträge auch über
Code:
e.options.length = 0;
, also das Setzen der Anzahl der Einträge. Allerdings gibt zumindest Selfhtml die length Eigenschaft als nur Lesen an.
nikosch ist offline  
Alt 26.02.2007, 13:31  
Erfahrener Benutzer
 
Registriert seit: 21.05.2008
Beiträge: 9.934
Zergling-new wird schon bald berühmt werdenZergling-new wird schon bald berühmt werden
Standard

Danke für den Hinweis, ich bau es die nächsten Tage um.
Zergling-new ist offline  
Alt 24.06.2008, 10:59  
Moderator
 
Registriert seit: 13.02.2008
Beiträge: 6.816
PHP-Kenntnisse:
Fortgeschritten
cycap ist einfach richtig nettcycap ist einfach richtig nettcycap ist einfach richtig nettcycap ist einfach richtig nettcycap ist einfach richtig nett
Standard

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
cycap ist offline  
Alt 24.06.2008, 11:36  
Forenpolitikum
 
Registriert seit: 21.05.2008
Beiträge: 44.697
PHP-Kenntnisse:
Fortgeschritten
nikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehen
Standard

Vielleicht hängt das mit der Sache zusammen, die ich als Anmerkung gepostet habe? Existiert evl. gar keine 1. Eintrag?
nikosch ist offline  
Alt 25.02.2009, 16:53  
Neuer Benutzer
 
Registriert seit: 25.02.2009
Beiträge: 4
iceman587 befindet sich auf einem aufstrebenden Ast
Standard

Kann man auch 3 mal die Selbe Abfrage stellen unter anderen select names mit den selben auswahlen??
iceman587 ist offline  
Alt 25.02.2009, 16:56  
Forenpolitikum
 
Registriert seit: 21.05.2008
Beiträge: 44.697
PHP-Kenntnisse:
Fortgeschritten
nikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehen
Standard

Na klar.
__________________
--
^^ O.O
„Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


--
nikosch ist offline  
Alt 25.02.2009, 18:01  
Neuer Benutzer
 
Registriert seit: 25.02.2009
Beiträge: 4
iceman587 befindet sich auf einem aufstrebenden Ast
Standard

@ 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
iceman587 ist offline  
Alt 25.02.2009, 18:06  
Forenpolitikum
 
Registriert seit: 21.05.2008
Beiträge: 44.697
PHP-Kenntnisse:
Fortgeschritten
nikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehennikosch genießt hohes Ansehen
Standard

Beschreib mal noch mal die Problemstellung
__________________
--
^^ O.O
„Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


--
nikosch ist offline  
Alt 26.02.2009, 14:03  
Neuer Benutzer
 
Registriert seit: 25.02.2009
Beiträge: 4
iceman587 befindet sich auf einem aufstrebenden Ast
Standard

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 14:07 Uhr).
iceman587 ist offline  
Thema geschlossen


Themen-Optionen


LinkBacks (?)
LinkBack to this Thread: http://www.php.de/tutorials/43433-html-javascript-verschachtelte-auswahlfelder.html
Erstellt von For Type Datum
Felixs death This thread Refback 20.10.2012 00:29
broadcast This thread Refback 12.10.2012 01:26
Number Book This thread Refback 11.10.2012 21:30
Tala Monthly This thread Refback 02.10.2012 04:07
Photo parting very strong 2013, Photo embrace separation 2013, Photo parting and betraya This thread Refback 01.10.2012 21:23
MetaGer, Suche nach: ajax json php mysql Abfrage This thread Refback 27.08.2012 13:06
HTML/JavaScript: Verschachtelte Auswahlfelder - Javascript-Forum JSwelt (Javascript, PHP, MySQL, AJAX, Webdesign) This thread Refback 27.03.2010 22:14
HTML/JavaScript: Verschachtelte Auswahlfelder - Javascript-Forum JSwelt (Javascript, PHP, MySQL, AJAX, Webdesign) This thread Refback 27.03.2010 21:50
HTML/JavaScript: Verschachtelte Auswahlfelder - Javascript-Forum JSwelt (Javascript, PHP, MySQL, AJAX, Webdesign) This thread Refback 27.03.2010 21:49
HTML/JavaScript: Verschachtelte Auswahlfelder - Javascript-Forum JSwelt (Javascript, PHP, MySQL, AJAX, Webdesign) This thread Refback 27.03.2010 21:45
Ajax Drop Down Box? - Forum: phpforum.de This thread Refback 25.12.2009 21:44
Ajax Drop Down Box? - Forum: phpforum.de This thread Refback 25.12.2009 13:57
Ajax Drop Down Box? - Forum: phpforum.de This thread Refback 25.12.2009 12:07
Produktselektor - Forum: phpforum.de This thread Refback 15.12.2009 07:53
Produktselektor - Forum: phpforum.de This thread Refback 15.12.2009 01:34
Produktselektor - Forum: phpforum.de This thread Refback 14.12.2009 20:13
Produktselektor - Forum: phpforum.de This thread Refback 14.12.2009 19:23
Dynamische <SELECT> Form - Forum: phpforum.de This thread Refback 09.12.2009 06:33
select auswahl ändert values des 2.selectfeldes - Forum: phpforum.de This thread Refback 07.12.2009 03:09
select auswahl ändert values des 2.selectfeldes - Forum: phpforum.de This thread Refback 04.12.2009 10:29
HTML/JavaScript: Verschachtelte Auswahlfelder - php.de This thread Refback 16.10.2009 14:06
php.de - das Deutsche PHP-Forum This thread Refback 29.05.2009 01:23

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
JS Verschachtelte Auswahlfelder loki0815 HTML, Usability und Barrierefreiheit 2 26.06.2008 17:52
verschachtelte Rubriken ausgeben / alle anzeigen prinzli PHP Tipps 2008 3 25.02.2008 21:37
Verschachtelte JOINs ... Ergebnis abziehen ... tomfrit Datenbanken 2 10.12.2007 07:14
Verschachtelte DB-Anfrage richtig? Bart Datenbanken 1 21.05.2006 17:58
[CSS] Verschachtelte Div Container - Breite anpassen I-Spy HTML, Usability und Barrierefreiheit 7 14.05.2006 10:51
Verschachtelte Abfrage über mehrere Tables hinweg? php_frage Datenbanken 9 29.04.2006 18:55
Verschachtelte Includes FoXyLiOn PHP-Fortgeschrittene 3 12.02.2006 14:24
Verschachtelte Datenbankabfrage - wie fange ich an? PHP Tipps 2007 9 02.02.2006 10:09
verschachtelte Abfrage PHP Tipps 2005-2 12 20.08.2005 19:28
verschachtelte if-else anweisung!? PHP Tipps 2005-2 7 04.08.2005 10:53
[Erledigt] 2 verschachtelte while Schleifen. Großes Performanceproblem Datenbanken 3 30.05.2005 11:52
verschachtelte MySQL-Abfrage PHP Tipps 2005 3 04.05.2005 11:44
[Erledigt] Auswahlfelder HTML, Usability und Barrierefreiheit 3 17.01.2005 09:31
Verschachtelte Arrays ausgeben PHP-Fortgeschrittene 2 10.12.2004 10:29
2 verschachtelte Divlayer und der Firefox. Tutti HTML, Usability und Barrierefreiheit 2 26.07.2004 21:24

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
javascript auswahlfeld, auswahlfeld html, html auswahlfeld, auswahlfelder, auswahlfeld javascript, html select verschachtelt, auswahlfelder html, http://www.php.de/tutorials/43433-html-javascript-verschachtelte-auswahlfelder.html, javascript uhrzeit auswählen, javascript auswahlfelder, auswahlfelder javascript, html auswahlfelder, javascript select verändert auswahl, html select verschachteln, html auswahlfeld javascript, verschachtelte auswahl, verschachtelte auswahlfelder, verschachtelte select html, javascript uhrzeit auswahl, javascript verschachtelte select

Alle Zeitangaben in WEZ +1. Es ist jetzt 01:38 Uhr.




Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum

Creative Commons License
Dieser Inhalt ist unter einer Creative Commons-Lizenz lizenziert.