2 abhängige auswahlboxen

Antworten

entweder du arbeitest über php. dann musst du box1 mit einer javascript submit funktion erweitern
über den rückgabewert, füllst du in php box2, bzw. textfeld

alternativ kann eine komplette javascrript lösung erstellt werden. hier hat man dann einen onChange aufruf, der dann dann box2 mit vordefinierten werten füllt

2.

dankeschön; erste variante halte ich für die bessere, da ich überwiegend in php arbeite.
kannst du mir vll. mit einem ansatz helfen?

3.

es kommt meiner meinung nach auf die datenmenge an; wenn die listen lang sind ist die lösung über php besser.

für kurze listen würde ich js verwenden, da hier nicht immer die seite neu geladen und aufgebaut wird. wirkt auch komfortabler.
allerdings muss der inhalt aller listen vorher schon per php zusammengestellt werden.

für die php lösung:
ein onChange=submit() für die box1 definieren
im php script $_POST['box1'] auswerten und dementsprechend die ausgaben für die 2. box mit echos erstellen

andere felder , die der user mittlerweile ausgeführt hat, sollten natürlich berücksichtigt und übernommen werden.

4.

die erste box hat 7 einträge die zweite zwischen 4 und 8.
die werte für die boxen kommen aus der datenbank.
kannst du mir vll. ein kleines beispiel mit zwei werten pro box zeigen?

5.

die beiden abhängigen auswahlboxen habe ich mittlerweile hinbekommen. es sollen nun mehrere werte aus box2 an ein textfeld per klick übergeben werden können. das ganze soll dazu dienen eine select abfrage an die datenbank zu senden.

Code:                   In Zwischenablage kopieren (nur IE)

---

<form name="box1"><p><select name="combo" size="1" onChange="redirect(this.options.selectedIndex)"><option>tabelle1</option><option>tabelle2</option><option>tabelle3</option></select><select name="box2" size="5"><option>feld11</option><option>feld12</option><option>feld13</option></select><script><!--var groups=document.box1.combo.options.lengthvar group=new Array(groups)for (i=0; i<groups; i++)group[i]=new Array()group[0][0]=new Option("feld11")group[0][1]=new Option("feld12")group[0][2]=new Option("feld13")group[1][0]=new Option("feld21")group[1][1]=new Option("feld22")group[2][0]=new Option("feld31")group[2][1]=new Option("feld32")group[2][2]=new Option("feld33")group[2][3]=new Option("feld34")var temp=document.box1.box2 function redirect(x){for (m=temp.options.length-1;m>0;m--)temp.options[m]=nullfor (i=0;i<group[x].length;i++){temp.options[i]=new Option(group[x][i].text,group[x][i].value)}temp.options[0].selected=true}function go(){location=temp.options[temp.selectedIndex].value}//--></script></form>1"><form name="box1"><br/><p><select name="combo" size="1" onChange="redirect(this.options.selectedIndex)"><br/><option>tabelle1</option><br/><option>tabelle2</option><br/><option>tabelle3</option><br/></select><br/><select name="box2" size="5"><br/><option>feld11</option><br/><option>feld12</option><br/><option>feld13</option><br/></select><br/><script><br/><!--<br/>var groups=document.box1.combo.options.length<br/>var group=new Array(groups)<br/>for (i=0; i<groups; i++)<br/>group[i]=new Array()<br/><br/>group[0][0]=new Option("feld11")<br/>group[0][1]=new Option("feld12")<br/>group[0][2]=new Option("feld13")<br/><br/>group[1][0]=new Option("feld21")<br/>group[1][1]=new Option("feld22")<br/><br/>group[2][0]=new Option("feld31")<br/>group[2][1]=new Option("feld32")<br/>group[2][2]=new Option("feld33")<br/>group[2][3]=new Option("feld34")<br/><br/>var temp=document.box1.box2     <br/><br/>function redirect(x){<br/>for (m=temp.options.length-1;m>0;m--)<br/>temp.options[m]=null<br/>for (i=0;i<group[x].length;i++){<br/>temp.options[i]=new Option(group[x][i].text,group[x][i].value)<br/>}<br/>temp.options[0].selected=true<br/>}<br/><br/>function go(){<br/>location=temp.options[temp.selectedIndex].value<br/>}<br/><br/>//--><br/></script><br/></form><br/><br/><br/>

---

6.

beim ausformulieren des javascript codes kann ich dir leider nicht helfen, weil ich auf diesem gebiet leider zu schwach bin.
aber dafür kann ich dir einen lösungsweg skizzieren und hoffe dir damit zu helfen.
gleichzeitig ist das eine einladung an erfahrene javascript programmierer hier weiter zu helfen.

wie du das schon richtig gemacht hast würde ich auch alle möglichkeiten für box 2 in einem 2-dim array speichern
über ein onLoad im body event dann den default wert für box1 selektieren
weiter gehts mit einem onChange auf Box1; das ruft dann eine funktion auf, die als erstes die inhalte von box2 löscht und dann neu füllt mit den werten aus dem array

wie hast du dann vor das textfeld anzusteurern? auch über ein onChange auf box2 oder einen button?
über onChange bzw. onClick kannst du dann ja textfeld.value setzen.

wo ich gerade etwas hänge, ist der punkt mit der select anfrage an die datenbank. wie hast du vor das umzusetzen?
ich nehme an du weisst dass du per javascript keine datenbank ansteuern kannst (und falls es doch geht ist das auf keien fall zu empfehlen)
wenn ich deine idee richtig verstehe, ist muss der weg folgender sein: auswahl der kriterien über select felder. die auswahlen werden über einformular submit an sen webserver zurückgeschickt, wo schon ein php-script wartet, dass die formulardaten in eine datenbankabfrage umwandelt und das ergebnis dann als html/xml format an den client zurückschickt

hoffe dir damit geholfen zu haben!

7.

Code:                   In Zwischenablage kopieren (nur IE)

---

<html><head><script type="text/javascript" language="javascript"><!--var group = new Array();group[0] = new Array();group[0][0] = new Array('Wert1A', 'Text1A');group[0][1] = new Array('Wert1B', 'Text1B');group[0][2] = new Array('Wert1C', 'Text1C');group[1] = new Array();group[1][0] = new Array('Wert2A', 'Text2A');group[1][1] = new Array('Wert2B', 'Text2B');group[2] = new Array();group[2][0] = new Array('Wert3A', 'Text3A');group[2][1] = new Array('Wert3B', 'Text3B');group[2][2] = new Array('Wert3C', 'Text3C');group[2][3] = new Array('Wert3D', 'Text3D');function Vorselektieren (){ document.forms['myForm'].elements['combo'].options[0].selected = true;}function redirect (formular, selektiert){ for (var i = formular.elements['box2'].childNodes.length-1; i >= 0 ; i--) { var loesche = formular.elements['box2'].childNodes[i]; formular.elements['box2'].removeChild(loesche); } for (var i = 0; i < group[selektiert].length; i++) { var neueOption = document.createElement('option'); neueOption.value = group[selektiert][i][0]; neueOption.text = group[selektiert][i][1]; formular.elements['box2'].appendChild(neueOption); } formular.elements['box2'].options[0].selected = true;}function go (ausgewaehlt){ alert(ausgewaehlt);}//--></script></head><body onLoad="Vorselektieren();"><form name="myForm"><p><select name="combo" size="1" onChange="redirect(this.form, this.options.selectedIndex)"><option>tabelle1</option><option>tabelle2</option><option>tabelle3</option></select><br><select name="box2" size="5" onChange="go(this.options[this.options.selectedIndex].value);"></select></form></body></html>2"><html><br/><head><br/><script type="text/javascript" language="javascript"><br/><!--<br/>var group = new Array();<br/><br/>group[0] = new Array();<br/>group[0][0] = new Array('Wert1A', 'Text1A');<br/>group[0][1] = new Array('Wert1B', 'Text1B');<br/>group[0][2] = new Array('Wert1C', 'Text1C');<br/><br/>group[1] = new Array();<br/>group[1][0] = new Array('Wert2A', 'Text2A');<br/>group[1][1] = new Array('Wert2B', 'Text2B');<br/><br/>group[2] = new Array();<br/>group[2][0] = new Array('Wert3A', 'Text3A');<br/>group[2][1] = new Array('Wert3B', 'Text3B');<br/>group[2][2] = new Array('Wert3C', 'Text3C');<br/>group[2][3] = new Array('Wert3D', 'Text3D');<br/><br/>function Vorselektieren ()<br/>{<br/>  document.forms['myForm'].elements['combo'].options[0].selected = true;<br/>}<br/><br/>function redirect (formular, selektiert)<br/>{<br/>  for (var i = formular.elements['box2'].childNodes.length-1; i >= 0 ; i--)<br/>  {<br/>    var loesche = formular.elements['box2'].childNodes[i];<br/>    formular.elements['box2'].removeChild(loesche);<br/>  }<br/><br/>  for (var i = 0; i < group[selektiert].length; i++)<br/>  {<br/>    var neueOption = document.createElement('option');<br/>    neueOption.value = group[selektiert][i][0];<br/>    neueOption.text = group[selektiert][i][1];<br/>    formular.elements['box2'].appendChild(neueOption);<br/>  }<br/><br/>  formular.elements['box2'].options[0].selected = true;<br/>}<br/><br/>function go (ausgewaehlt)<br/>{<br/>  alert(ausgewaehlt);<br/>}<br/><br/>//--><br/></script><br/></head><br/><body onLoad="Vorselektieren();"><br/><br/><form name="myForm"><br/><p><select name="combo" size="1" onChange="redirect(this.form, this.options.selectedIndex)"><br/><option>tabelle1</option><br/><option>tabelle2</option><br/><option>tabelle3</option><br/></select><br/><br><br/><select name="box2" size="5" onChange="go(this.options[this.options.selectedIndex].value);"><br/></select><br/></form><br/><br/></body><br/></html>

---

8.

Hallo, also die idee die boxen mit einer datenbankabfrage zu füllen, habe ich verworfen; trage die werte jetzt selbst ein im script. wie schon gesagt soll es möglich sein per click sowohl werte aus box 1 und box 2 per onclick an ein textfeld zu übergeben. das ganze ergibt eine datenbankabfrage die über einen sende button abgesetzt werden soll. hier nochmal der code;

Code:                   In Zwischenablage kopieren (nur IE)

---

<form name="box1"><p><select name="combo" size="1" onChange="redirect(this.options.selectedIndex)"><option>tabelle1</option><option>tabelle2</option><option>tabelle3</option></select><select name="box2" size="5"><option>feld11</option><option>feld12</option><option>feld13</option></select><script><!--var groups=document.box1.combo.options.lengthvar group=new Array(groups)for (i=0; i<groups; i++)group[i]=new Array()group[0][0]=new Option("feld11")group[0][1]=new Option("feld12")group[0][2]=new Option("feld13")group[1][0]=new Option("feld21")group[1][1]=new Option("feld22")group[2][0]=new Option("feld31")group[2][1]=new Option("feld32")group[2][2]=new Option("feld33")group[2][3]=new Option("feld34")var temp=document.box1.box2 function redirect(x){for (m=temp.options.length-1;m>0;m--)temp.options[m]=nullfor (i=0;i<group[x].length;i++){temp.options[i]=new Option(group[x][i].text,group[x][i].value)}temp.options[0].selected=true}function go(){location=temp.options[temp.selectedIndex].value}//--></script></form>3"><form name="box1"><br/><p><select name="combo" size="1" onChange="redirect(this.options.selectedIndex)"><br/><option>tabelle1</option><br/><option>tabelle2</option><br/><option>tabelle3</option><br/></select><br/><select name="box2" size="5"><br/><option>feld11</option><br/><option>feld12</option><br/><option>feld13</option><br/></select><br/><script><br/><!--<br/>var groups=document.box1.combo.options.length<br/>var group=new Array(groups)<br/>for (i=0; i<groups; i++)<br/>group[i]=new Array()<br/><br/>group[0][0]=new Option("feld11")<br/>group[0][1]=new Option("feld12")<br/>group[0][2]=new Option("feld13")<br/><br/>group[1][0]=new Option("feld21")<br/>group[1][1]=new Option("feld22")<br/><br/>group[2][0]=new Option("feld31")<br/>group[2][1]=new Option("feld32")<br/>group[2][2]=new Option("feld33")<br/>group[2][3]=new Option("feld34")<br/><br/>var temp=document.box1.box2     <br/><br/>function redirect(x){<br/>for (m=temp.options.length-1;m>0;m--)<br/>temp.options[m]=null<br/>for (i=0;i<group[x].length;i++){<br/>temp.options[i]=new Option(group[x][i].text,group[x][i].value)<br/>}<br/>temp.options[0].selected=true<br/>}<br/><br/>function go(){<br/>location=temp.options[temp.selectedIndex].value<br/>}<br/><br/>//--><br/></script><br/></form><br/><br/><br/>

---

9.

Warum willst du den selektierten Wert in einem Textfeld schreiben?

10.

Möchte damit eine datenbankabfrage basteln;

11.

Ja, das hatte ich schon verstanden.

Ich werde meine Frage neu formulieren: warum muss das in ein Textfeld und dann per location.href ausgewertet werden? Warum nicht gleich den Wert in location.href setzen?

12.

Hallo,

habe auch eine frage zu diesem Thema.
Welche änderungen müssen vorgenommen werden wenn box2 nur eingeblendet werden soll,
wenn in combo ein eindeutigen Wert ausgewählt habe. Zum Ausblenden habe ich style="display: none;"
eingetragen. Aber wie aktiviere ich box2 wieder?

Achim

13.

probiers mal mit der doku

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display


 

Weitere Themen

Bitte mal über Programmzeile schauen gis httpd.conf auf deutsch Quiz: Gewinnflicken einbauen Kann nichts in Datenbank eintragen Html-seite teilweise auslesen Nocheinmal die frage nach der Weiterleitung Tabellen durchsuchen neuartiges Communityboard Weiterleitung nach login Probleme mit phpMyAdmin-2.5.1 Probleme bei installation Text vertikal zum Bild ausrichten Fehler mit &quot; oder ' über Formular Einfache Gallerie ohne Tn - bitte um Denkansatz Transparenter Button Bildergalerie - Tutorial oder Buch Variable wird automatisch gelöscht Apach Server startet nicht Formular mit direkter Ausgabe anzahl der dateien + grösse und ausgabe gesammt grösse php quellcode einsehen Webdesigner/Festanstellung/Düsseldorf (Schwerpunkt Gestaltung) Charset bei fopen Countdown bis zum Wochenende hilfe mit regulären ausdrücken isnull eigenen server erstellen ereg / eregi Der Letzte in der Reihe ... termin erinnerung mit automatischer datumsberechnung Session ohne Cookies (absoluter Noob) $variablen ['$anderevariable'] Mehrdimensioanles Array sortieren keine scrollleisten erscheinen lassen Welches Buch? Probleme mit rekursiver Funktion mittls js datei öffnen Gd 2 Problem auf Redhat 9, Plesk 6, Apache 2.0, Php 4.2.2 Ordnerinhalt auslesen Abfrage über mehrere Tabellen Arrays in bestimmter Reihenfolge sortieren Problem mit Ftp-editor nl12br Next, sprich zu mir Druckbare Ansicht per PHP-Script? Formulardaten übergabe an PHP-Programm [PEAR] HTTP_WebDAV_Client - Dokumentation? Klasse innerhalb einer anderen Klasse instanzieren Variable Weiter