Abhängige Selectboxen @ tutorials.de: Tutorials, Forum & Hilfe

daN-the-man · 17.11.06 20:16

Hi... ich habe hier ein Problem, bei dem ich nicht so recht weiterkomme. Ich Poste erstmal das, was ich schon habe.

HTML-Code:

<html>
<head>
  <title>Test</title>
  <script type="text/javascript">
  <!--
  var toadd = new Array();

  toadd["Nokia"] = new Array();
  toadd["Nokia"][0] = "1100";
  toadd["Nokia"][1] = "6230";
  toadd["Nokia"][2] = "8800";

  toadd["SonyEricsson"] = new Array();
  toadd["SonyEricsson"][0] = "W800i";
  toadd["SonyEricsson"][1] = "K800i";
  
  function addOption(wert) 
  {
     if(document.myform.modell.length > 0)
     {
       // wenn wir einträge haben, erst mal weg damit
       document.myform.modell.length = null;
     }

     for(i=0;i < toadd[wert].length;i++)
     {
       // solange das gewählte array einträge hat, 
       // übertragen wir diese in die selectbox
       ins = new Option(toadd[wert][i],toadd[wert][i]);
       document.myform.modell.options[document.myform.modell.length] = ins;
     }
  }
  -->
  </script>
</head>


<body>
<form name="myform" action="test.php" method="post">
<p>
Hersteller:
  <select name="hersteller" onchange="addOption(this.form.hersteller.options[this.form.hersteller.options.selectedIndex].value)">
    <option>--- Hersteller auswählen ---</option>
    <option value="Nokia">Nokia</option>
    <option value="SonyEricsson">SonyEricsson</option>
  </select><br />
Modell:
  <select name="modell">
    <option>--- Modell auswählen ---</option>
  </select><br />  
<input type="submit" name="sent" /></td>
</form>
</body>
</html>

Die im Java-Script-Teil angelegten Arrays kann ich per PHP füllen. Bei jedem Handy-Modell steht mir in PHP jetzt allerdings nicht nur der Handy-Name, sondern auch eine ID zu verfügung.
Was ich nun möchte: Das value-Attribut der Modell-Optionen soll mit der Handy-ID gefüllt und mit dem Namen ausgezeichnet werden.

Kann mir da wohl jemand verraten, wie ich das anstellen kann?
Wenn jetzt z.b. das Modell 8800 die interne id 34 hat, soll die option so aussehen: <option value="34">8800</option>

Danke

daNny

Sven Mintel · 18.11.06 03:04

Da gibts viele Möglichkeiten, bspw. speichere die Daten auf diese Art:

Code :

1	toadd["Nokia"][2] = "8800\|34";

....dann musst du den Wert nur noch anhand des Striches splitten und erhältst Arrays mit paarweise Name und ID.

Oder...was etwas "sauberer" ist..., nehme die ID als Array-Schlüssel:

Code :

1	toadd["Nokia"][34] = "8800";

in beiden Fällen bliebe dann nur der Zugriff auf die Arrays geringfügig zu Ändern.

daN-the-man · 18.11.06 10:43

Die zweite Variante hatte ich auch schon im Visier.

Aber wie kann ich denn soetwas wie eine foreach-Schleife realisieren? Denn die IDs sind nicht unbedingt in der Reihenfolge der natürlichen Zahlen. D.h. es kann auch sein, dass eine ID zwischendurch fehlt etc.... Bzw wie schaffe ich es denn dann, den Array-Index als value für die Option zu benutzen.

Vielen Dank
daNny

Sven Mintel · 18.11.06 11:38

Es gibt noch eine weitere Variante, Arrays in einer for-Schleife zu durchlaufen.
Dabei wird Bezug auf alle Array-Schlüssel genommen, unabhängig davon, ob es ein (duchlaufend) indizierter Array ist.

Code :

for(var k in toadd[wert])
     {
       ins = new Option(toadd[wert][k],k);
       document.myform.modell.options[document.myform.modell.length] = ins;
     }

k ist dabei der Zeiger auf den aktuellen Array-Schlüssel.

daN-the-man · 18.11.06 12:03

Jippie! Es geht

1000 Dank!

Jetzt evtl. noch eine kosmetische Sache: Wenn ich das Form verschicke und und nun beispielsweise ein anderes Feld fehlerhaft ausgefüllt wurde, dann soll dieses Formular erneut angezeigt werden, nur dass das zuvor ausgewählte Modell vorselektiert ist. Kann ich das auch so recht "unkompliziert" mit JS abfangen?

Ich PHP kann ichs ja einfach abfangen...

PHP-Code:


foreach ($meine_handys as key) {

    if ($key == $_POST['modell']) {

        // Hier habe ich mein ausgewähltes Handy

        // [..] weiterer Code...

    }

}

. Aber da die Modell-Selectbox ja dynamisch generiert wird, kann ich die entsprechende Option ja nicht mit selected="selected" erweitern. Da gibts doch bestimmt auch ne Methode in JS für, odeR?

Sven Mintel · 18.11.06 12:21

Du könntest zuerst deine Funktion aufrufen, bspw.
per

Code :

1	addOption('Nokia')

....und dann die entsprechende Option selektieren...da sie dann ja vorhanden ist.

daN-the-man · 18.11.06 12:29

Das klingt gut... ich danke dir!

Duellking · 07.08.08 17:18

Hallo Community,
für meine Handy Webseite habe ich 2 Selectboxen gebastelt in der man sein Handy auswählen kann und jenachdem seine passenden Downloads bekommt.
Das ganze funktioniert ganz gut.

Nur habe ich diese 2 Selectboxen nicht nur oben auf der Seite gemacht, sondern auch unten auf der Seite!

Der einzigste Unterschied an den oberen 2 und unteren 2 ist, das die Forms "myform" und "myform2" heißen.

Wenn ich jetzt bei einem das Modell ändere, dann ändert es sich auch beim anderen. Aber beim Hersteller ändert sich nichts. Soll es aber!

Code :

  <script type="text/javascript">
  <!--
  var toadd = new Array();
 
  toadd["Nokia"] = new Array();
  toadd["Nokia"][0] = "5300";
  toadd["Nokia"][0] = "6111";
 
  toadd["SonyEricsson"] = new Array();
  toadd["SonyEricsson"][0] = "W800i";
  toadd["SonyEricsson"][1] = "K800i";
  
  function addOption(wert) 
  {
     if(document.myform.modell.length > 0)
     {
       // wenn wir einträge haben, erst mal weg damit
       document.myform.modell.length = null;
     }
     
     if(document.myform2.modell.length > 0)
     {
       // wenn wir einträge haben, erst mal weg damit
       document.myform2.modell.length = null;
     }
     
     
 
     for(i=0;i < toadd[wert].length;i++)
     {
       // solange das gewählte array einträge hat, 
       // übertragen wir diese in die selectbox
       ins = new Option(toadd[wert][i],toadd[wert][i]);
       document.myform.modell.options[document.myform.modell.length] = ins;
     }
     
     for(i=0;i < toadd[wert].length;i++)
     {
       // solange das gewählte array einträge hat, 
       // übertragen wir diese in die selectbox
       ins = new Option(toadd[wert][i],toadd[wert][i]);
       document.myform2.modell.options[document.myform2.modell.length] = ins;
     }
     
  }
  -->
  </script>
 
 
 
 
      <form name='myform' action='?bereich=<?php echo $bereich; ?>&unterbereich=<?php echo $unterbereich; ?>&site=<?php echo $site; ?>' method='post'>
        <select name='hersteller' onchange='addOption(this.form.hersteller.options[this.form.hersteller.options.selectedIndex].value)' value='$hersteller'>
          <option value='Nokia'>Nokia</option>
          <option value='SonyEricsson'>Sony Ericsson</option>
          <option value='Motorrola'>Motorrola</option>
          <option value='Samsung'>Samsung</option>
        </select>
 
        <select name='modell'>
        </select>
 
        <input type='submit' name='send' value='Go' />
      </form>

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

jsp: voneinander abhängige selectboxen

Selectboxen Auswerten

Selectboxen und IE 6

Relative Selectboxen

Selectboxen barrierefrei?

E-Mail:

Abonnieren Abbestellen