select-box onchange

[Tomm]

Hallo,

ich möchte ein select mit mehreren Optionen (Kategorien) erstellen
Diese Auswahlbox soll mehrere Kategorie enthalten, bei Auswahl einer Kategorie
soll in einem weiteren select eine Unterkategorie ausgewählt werden können
Ähnlich wie bei Ebay, ich wähle die Kategorie z.B. AUTO,
danach kann ich im untergeordneten select die Unterkategorien,
z.B. AUDI,VW,OPEL...... auswählen

Ich hab hier etwas zu diesem Thema gefunden, komme aber trotzdem nicht zurecht
das Unterkategorien-select soll allerdings immer sichtbar sein.

JavaScript: select-box onchange: neue select-box

Gruß
Tomm

 

[threadi]

Wie weit bist Du denn gekommen? Wie sieht Dein Test aus?

 

[Tomm]

bis jetzt bin ich noch gar nicht weiter gekommen

so ähnlich müßte der Code aussehen
nach der Auswahl von select1 , müssen im select2 die richtigen Auswahlmöglichkeiten drinstehen.
Ich weiss nur nicht wie man die Javascript -Funktion schreibt und was im onchange drinstehen muss

<select  id="select1" name="Kategorie" onchange="......." >
 
     <option value="0">auswahl0</option>
   <option value="1" >auswahl1</option>
    <option value="2"  >auswahl2</option>
     <option value="3"   >auswahl3<option>
     </select> 
<select  id="select2" name="Unterkategorie" >
 
     <option value="0">unterauswahl 0</option>
   <option value="1" >unterauswahl 1</option>
    <option value="2"  >unterauswahl 2</option>
     <option value="3"   >unterauswahl 3<option>
     </select>

 

[threadi]

Deinen Quellcode fehlt jeglicher JavaScript-Code. Und der ist das Entscheidende. Hierbei gibt es jedoch für dich mehrere Möglichkeiten:

a) Du schreibst jeden möglichen Inhalt fest in den JavaScript-Code. Du müsstest dann per JavaScript jeweils die innerhalb vom zweiten <select> liegenden <option>-Felder austauschen.

b) Du schreibst jeden möglichen Inhalt fest in den HTML-Code und blendest per CSS die nicht anzuzeigenden Auswahlfelder (also mehrere <select>s) aus. Diese <select>s müssen dann jeweils eigene id's und namen haben. Per JavaScript entscheidest Du dann je nach Auswahl im ersten <select>-Feld, welches der zweiten Felder Du anzeigen willst.

function aendereAuswahl() {
 // Auswahl in select1 ermitteln
 var auswahl = document.getElementById("select1").options[document.getElementById("select1").selectedIndex].value;
 // blende alle Auswahlfelder aus
 document.getElementById("select2").style.display = "none";
 document.getElementById("select3").style.display = "none";
 document.getElementById("select4").style.display = "none";
 document.getElementById("select5").style.display = "none";
 // zeige das zur Auswahl passende Auswahlfeld an
 if( auswahl == 3 ){
  document.getElementById("select3").style.display = "block";
 }
}

Ginge auch anders zu schreiben, ist nur mal spontan hingeworfen.

c) Du könntest die anzuzeigenden Daten per AJAX laden. Je nachdem wie deine Daten vorliegen könntest Du in dem Fall diese auch dynamisch per AJAX-Request direkt aus einer Datenbank oder Textdatei laden und anzeigen. Das ist jedoch etwas komplexer, aber der optimale Weg heutzutage für größere Anwendungen.

 

[Tomm]

Ja, Danke

ich habs glaub ich kapiert
Man macht mehrere Selects und blendet dann immer nur das zutreffende ein.
Ist zwar etwas umständlich wenn es sehr viele Auswahlmöglichkeiten gibt, funktioniert aber

Nur noch eine Frage, was muss ich in onchange="......."
reinschreiben oder kann man das weglassen ?

 

[threadi]

Der onchange-Eventhandler ist die Verbindung zwischen der Aktion der Änderung in der select-Box und deiner JavaScript-Funktion die letztlich das macht was Du willst. Du musst dort also den JavaScript-Funktionsnamen angeben damit es funktioniert.

 

[Tomm]

Ja, Danke
funktioniert einwandfrei
Ich mach die Unterkategorien mit nem Array,das ich in einer extra Datei speichere,
dann kann ich jederzeit Änderungen vornehmen