Select Feld anderes Select Feld steuern lassen aber wie?

danielmueller

danielmueller

Gesperrt
Ich habe auf meiner Seite zwei select Felder. Nun möchte das wenn man bei der ersten etwas auswählt die sichtbaren Einträge der jeweils anderen einschränken so wie das zb bei momentan bei ebay der Fall ist wenn man einen Artikel einstellt. Ich kann aber auch noch ein Beispiel geben:
Das erst select Feld enthält die Optionen:
1.) Autos
2.) Musik
Das zweite:
1.) Gitarren
2.) Klaviere
3.)Porsche

wenn man nun im ersten Feld Musik auswählt soll im zweiten nur noch Gitarren und Klaviere sichtbar sein, und wenn man auf Autos geht nur noch Porsche. Wie kann ich sowas mit Java Skript machen?
 
Hi,

ein Konstrukt mit einem mehrdimensionalen, assoziativen Array sollte das Problem lösen.
Als Index-Schlüssel des assoziativen Arrays dienen die Values aus den Optionen des
Select-Bereichs. Als Werte werden dem Index die Elemente zugeordnet, die bei Auswahl
im zweiten Select-Bereich angezeigt werden sollen.

Beipiel:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dynamische Select-Bereiche</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Quaese">
<script language="javascript" type="text/javascript">
<!--
var arrOptions = new Array();

// Alle Elemente in Array aufnehmen   - mit Value aus Index 0 als Schlüssel
arrOptions["optChoose"] = new Array("Geige", "VW", "Klavier", "Horn", "BMW");
// Musik-Elemente in Array aufnehmen  - mit Value aus Index 1 als Schlüssel
arrOptions["optMusik"] = new Array("Geige", "Klavier", "Horn");
// Auto-Elemente in Array aufnehmen   - mit Value aus Index 2 als Schlüssel
arrOptions["optAuto"] = new Array("VW", "BMW");

function setItems(objForm){
    // Items löschen
    objForm.selItems.length = 0;

    // Gewünschte Items durchlaufen
    for(var i=0; i<arrOptions[objForm.selKategorie.value].length; i++){
        // Neue Option erstellen
        objForm.selItems.options[i] = new Option(arrOptions[objForm.selKategorie.value][i], false, true);
        // Value der neuen Option setzen
        objForm.selItems.options[i].value = "opt" + arrOptions[objForm.selKategorie.value][i];
    }
}
  -->
</script>
</head>
<body>
    <form action="" method="" target="">
        <select name="selKategorie" size="1" onchange="setItems(this.form);">
            <option value="optChoose">- wählen -  <!-- Index 0 -->
            <option value="optMusik">Musik        <!-- Index 1 -->
            <option value="optAuto">Auto          <!-- Index 2 -->
        </select>
        <select name="selItems" size="1">
            <option value="optGeige">Geige
            <option value="optVW">VW
            <option value="optKlavier">Klavier
            <option value="optHorn">Horn
            <option value="optBMW">BMW
        </select>
    </form>
</body>
</html>
Ich hoffe, das hilft Dir/Euch weiter.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück