✔ Anfänger Frage zu select mit dropdown

areuter · 24. April 2008

Hallo,
bin absolut neu und fange erst mit javascript an..
Ich habe folgendes kleines Script:

Code:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<title>Neue Seite 1</title> 
<script language="javascript"> 
function select(){ 
selected = document.form.dropdown_parent.value; 
switch(selected){ 

case "dropdown_parent": 
childx = "<select size='1' name='child1'><option>Child 1</option><option>Child 2</option><option>Child 3</option></select>";break; 

case "2": 
childx = "<select size='1' name='child1'><option>Child 4</option><option>Child 5</option><option>Child 6</option></select>";break; 

case "3": 
childx = "<select size='1' name='child1'><option>Child 7</option><option>Child 8</option><option>Child 9</option></select>";break; 
} 
document.getElementById("dropdown_child").innerHTML = childx; 
} 

</script> 
</head> 
<body> 
<form method="POST" action="" name="form"> 
<select size="1" name="dropdown_parent" onchange="select()"> 
<option value="1">Parent A</option> 
<option value="2">Parent B</option> 
<option value="3">Parent C</option> 
</select></p> 
<p> 
<div id="dropdown_child"> 
<select size="1" name="child1"> 
<option>Child 1</option> 
<option>Child 2</option> 
<option>Child 3</option> 
</select></div></p> 
<p><input type="submit" value="Abschicken" name="B1"><input type="reset" value="Zurücksetzen" name="B2"></p> 
</form> 

</body> 
</html>

wäre es möglich anstelle von bsplw. case "1": auch case "dropdown_parent " oder "select()" oder. ahnliches zu schreiben, um die drei cases nicht ausschreiben zu müssen..?
danke im voraus!
gruss
arne

Sven Mintel · 25. April 2008

Moin,...

wenn deine Frage im Allgemeinen darauf abzielt, wie du dort mit weniger Code auskommst, dann gibt es diverse Möglichkeiten.
Eine wäre bspw. das manipulieren der exisierenden Auswahlliste, anstatt eine komplett Neue zu Erzeugen:

In deinem Beispiel würde bspw. Folgendes gut passen(ich hab deinen Code mal um die für das Beispiel unwichtigen Teile erleichtert)

Code:

<script type="text/javascript"> 

function funktion(parentList,prefix)
{ 
 childList = parentList.form.child1;
 for(o = 0; o < childList.options.length; ++o)
  {
   childList.options[o].text = 
    prefix +
     ((parentList.selectedIndex*childList.options.length)+1+o)
  }
} 
</script> 

<form> 
  <select onchange="funktion(this,'Child ')"> 
    <option>Parent A</option> 
    <option>Parent B</option> 
    <option>Parent C</option> 
  </select>
  <select size="4" name="child1"> 
    <option>Child 1</option> 
    <option>Child 2</option> 
    <option>Child 3</option> 
  </select>
</form>

...es wird nur der Text in den bestehenden Optionen verändert anhand der Auswahl in der 1. Liste...das Ergebnis ist dasselbe

(du kannst auch beide <select> beliebig um Optionen erweitern, das Skript arbeitet weiterhin, ohne etwas daran Ändern zu Müssen)

areuter · 25. April 2008

moin sven,
danke für deine antwort.
du hast recht, dass ich mit weniger script auskommen möchte.
ich möchte strings aus einer datenbank holen, wenn dropdown_parent verändert wird.
also so etwas:

PHP:

function select(){
selected = document.form.dropdown_parent.value;
switch(selected){
case \"dropdown_parent\":
childx = \"<select size='1' name='child1'><option>dropdown_parent</option>\";break;
}
document.getElementById(\"dropdown_child\").innerHTML = childx;
}

du hast mir hoffnung gemacht, dass das irgendwie geht..
danke im voraus
bis denne
arne

Sven Mintel · 25. April 2008

Moin,

jo, das geht, ist auch nicht viel komplizierter

Hier mal nen Beispiel:

Code:

<script type="text/javascript"> 
werte=[
        'Banane,Mango,Kirsche',          
        'Haselnuss,Walnuss,Erdnuss',
        'Gurke,Tomate,Bohne,Zwiebel'
      ];
      

function funktion(parentList,arr)
{ 
 childList = parentList.form.child1;//Zeiger auf ChildList
 childList.options.length=0;//ChildList leeren
 arr=arr.split(',');//Zeichenkette arr anhand des Kommas teilen
 for(o = 0; o < arr.length; ++o)//Array arr durchlaufen
  {
    //neue Option aus dem aktuellen Element von arr erzeugen und 
    //in ChildList einhängen
   childList.options[childList.options.length]=new Option(arr[o]);
  }
} 
</script> 

<form> 
  <select onchange="funktion(this,werte[this.selectedIndex])"> 
    <option>Obst</option> 
    <option>Nüsse</option> 
    <option>Gemüse</option> 
  </select>
  <select size="4" name="child1"> 
    <option>Banane</option> 
    <option>Mango</option> 
    <option>Kirsche</option> 
  </select>
</form>

Die Funktion erwartet jetzt als 2. Parameter eine Zeichenkette, welche durch Kommas separiert die neuen Werte enthält.
Diese kannst du beim onChange per AJAX aus deiner DB abfragen.
Falls es nicht alzuviele Werte sind, welche da gesamt in der DB lagern, wäre es einen Gedanken wert, bereits eingangs alle Werte auszulesen und in Arrayform abzuspeichern(so wie bei werte in dem Beispiel)....das würde die Sache um einiges flüssiger machen, weil nicht bei jedem onChange der Server abgefragt werden muss.

Andernfalls könnte man, um den Server etwas zu entlasten, die bereits geholten Werte in einem Array puffern, und beim onChange erstmal schauen, ob dort schon etwas vorhanden ist...das erpart dann das mehrmalige holen derselben Werte vom Server.

areuter · 25. April 2008

moin sven,
danke für die antwort und dein script!
wäre das event. auch eine lösung?

PHP:

echo " 
case \"$string\": 
"; 
$result = mysql_query("SELECT wert1, wert2 FROM $tblname WHERE wert1=$string"); 

echo "childx = \"<select size='1' name='name'>"; 
while($resultx = mysql_fetch_array($result)) 
{ 
echo "<option>{$resultx['wert2']}</option>"; 
} 
echo "</select>\";break;"; 
mysql_close();

ich müsste dann (nur) - und daran hängt es, irgendwie aus dem dropdown_parent den $string "rein bekommen"?
DANKE!
arne

Sven Mintel · 25. April 2008

Nö, das geht leider nicht.
Zu dem Zeitpunkt, wo du die Auswahllisten siest, ist das PHP-Skript bereits beendet, du kannst auf Benutzereingaben hin(Änderung der Auswahl) im bestehenden Dokument keine PHP-Anweisungen mehr verarbeiten.

Wenn du zu diesem Zeitpunkt etwas vom Server holen willst(bspw. Daten aus der DB), dann musst du dies mit AJAX tun.

areuter · 25. April 2008

was funktioniert bzw. was ich schon hin bekommen habe ist:

PHP:

echo "<script language=\"javascript\">
function selectx(){
selectedx = document.form.dropdown_parentx.value;
switch(selectedx){

echo "
case \"alpha\":  
";  
$result = mysql_query("SELECT wert1, wert2 FROM $tblname WHERE wert1='alpha'");  

echo "childx = \"<select size='1' name='name'>";  
while($resultx = mysql_fetch_array($result))  
{  
echo "<option>{$resultx['wert2']}</option>";  
}  
echo "</select>\";break;";  

echo "  
case \"bravo\":  
";  
$result = mysql_query("SELECT wert1, wert2 FROM $tblname WHERE wert1='bravo'");  

echo "childx = \"<select size='1' name='name'>";  
while($resultx = mysql_fetch_array($result))  
{  
echo "<option>{$resultx['wert2']}</option>";  
}  
echo "</select>\";break;";  

echo "
}
document.getElementById(\"dropdown_child\").innerHTML = childx;
}
</script>

<select size=\"1\" name=\"dropdown_parent\" onchange=\"select()\">
<option value=\"Alpha\">Alpha</option>
<option value=\"Bravo\">Bravo</option>
</select>";
mysql_close();

..nur wäre es lästig alles bis bsplw. zulu ausschreiben zu müssen.
gruss
arne

Sven Mintel · 25. April 2008

Brauchst du doch auch nicht, in meinem Beispiel findest du im JS einen Array namens "werte"....es reicht, wenn du dort die Werte aus der DB hineinschreibst.

areuter · 5. Mai 2008

hallo,
ich wieder..
sven hatte mir freundlicher weise hiermit geholfen:

PHP:

<script type="text/javascript"> 
werte=[
        'Banane,Mango,Kirsche',          
        'Haselnuss,Walnuss,Erdnuss',
        'Gurke,Tomate,Bohne,Zwiebel'
      ];
      

function funktion(parentList,arr)
{ 
 childList = parentList.form.child1;//Zeiger auf ChildList
 childList.options.length=0;//ChildList leeren
 arr=arr.split(',');//Zeichenkette arr anhand des Kommas teilen
 for(o = 0; o < arr.length; ++o)//Array arr durchlaufen
  {
    //neue Option aus dem aktuellen Element von arr erzeugen und 
    //in ChildList einhängen
   childList.options[childList.options.length]=new Option(arr[o]);
  }
} 
</script> 

<form> 
  <select onchange="funktion(this,werte[this.selectedIndex])"> 
    <option>Obst</option> 
    <option>Nüsse</option> 
    <option>Gemüse</option> 
  </select>
  <select size="4" name="child1"> 
    <option>Banane</option> 
    <option>Mango</option> 
    <option>Kirsche</option> 
  </select>
</form>

Kann mir event. jemand sagen, wie ich diese function zweimal in ein script unter kriege?
Hatte es schon so:

PHP:

function funktion2(parentList,arr)
{ 
 childList = parentList.form.child2;//Zeiger auf ChildList
 childList.options.length=0;//ChildList leeren
 arr=arr.split(',');//Zeichenkette arr anhand des Kommas teilen
 for(o = 0; o < arr.length; ++o)//Array arr durchlaufen
  {
    //neue Option aus dem aktuellen Element von arr erzeugen und 
    //in ChildList einhängen
   childList.options[childList.options.length]=new Option(arr[o]);
  }
} 
</script> 

<form> 
  <select onchange="funktion2(this,werte[this.selectedIndex])"> 
    <option>Obst</option> 
    <option>Nüsse</option> 
    <option>Gemüse</option> 
  </select>
  <select size="4" name="child2"> 
    <option>Banane</option> 
    <option>Mango</option> 
    <option>Kirsche</option> 
  </select>
</form>

Verstehe es nicht.
Danke im voraus!
arne

Sven Mintel · 5. Mai 2008

Du kannst diese Funktion mehrmals verwenden, übergebe ihr im Funktionsaufruf halt die nötigen Parameter, z.B. so:

Code:

<script type="text/javascript"> 
werte=[
        'Banane,Mango,Kirsche',          
        'Haselnuss,Walnuss,Erdnuss',
        'Gurke,Tomate,Bohne,Zwiebel'
      ];

werte2=[
        'Chardonnay,Riessling,Grauburgunder',          
        'Bordeaux,Beaujolais,Rioja'
      ];

      

function funktion(parentList,arr,childList)
{ 
 childList.options.length=0;//ChildList leeren
 arr=arr.split(',');//Zeichenkette arr anhand des Kommas teilen
 for(o = 0; o < arr.length; ++o)//Array arr durchlaufen
  {
    //neue Option aus dem aktuellen Element von arr erzeugen und 
    //in ChildList einhängen
   childList.options[childList.options.length]=new Option(arr[o]);
  }
} 
</script> 

<form> 
  <select onchange="funktion(this,werte[this.selectedIndex],this.form.child1)"> 
    <option>Obst</option> 
    <option>Nüsse</option> 
    <option>Gemüse</option> 
  </select>
  <select size="4" name="child1"> 
    <option>Banane</option> 
    <option>Mango</option> 
    <option>Kirsche</option> 
  </select>
  <select onchange="funktion(this,werte2[this.selectedIndex],this.form.child2)"> 
    <option>Weisswein</option> 
    <option>Rotwein</option> 
  </select>
  <select size="4" name="child2"> 
    <option>Chardonnay</option> 
    <option>Riessling</option> 
    <option>Grauburgunder</option> 
  </select>
</form>

✔ Anfänger Frage zu select mit dropdown

areuter

Grünschnabel

Sven Mintel

Mitglied

areuter

Grünschnabel

Sven Mintel

Mitglied

areuter

Grünschnabel

Sven Mintel

Mitglied

areuter

Grünschnabel

Sven Mintel

Mitglied

areuter

Grünschnabel

Sven Mintel

Mitglied

Neue Beiträge