Problem mit zwei Auswahllisten, bitte um dringende Hilfe

F

Fuma

Grünschnabel
HI leute,

brauche unbedingt eure hilfe!

Mein Anliegen:

Hab grade eine Auswahlliste erstellt, die einzelnen "options" hab ich per php aus einer mysql-datenbank ausgelesen, wobei "value" immer die jeweilige kategorie_id ist.
alles noch kein problem!

nun gibt es aber noch unterkategorien
--> also, habe ich eine zweite auswahlliste erstellt, die leer ist.
Bei der ersten auswahlliste hab ich nun das Ereignis "onChange" eingesetzt, damit wenn ich die hauptkategorie ausgewählt habe, in der neuen auswahlliste unten drunter, direkt die unterkategorien dazu erscheinen, aber ich weis nicht, wie ich das anstellen soll.

hat jmd 'ne ahnung wie das gehen könnte?

man könnte ja die unterkategorien, die man aus der datenbank holt in ein array schreiben, aber weiter weiß ich auch nicht!

itte helft mir, danke elbart
 
Hi,

erstelle ein mehrdimensionales Array.

- Die erste Komponente erhält die Kategorie-ID als Index (assoziativ).
- In der zweiten Komponente werden die Unterkategoriewerte geschrieben.

Tritt der onchange-Event ein, wird die zweite Liste zunächst gelöscht und anschliessend entsprechend
des gewählten Wertes der ersten Liste neu aufgebaut. Die neuen Optionen werden mit new option()
erstellt und jeweils ans Ende der Liste eingehängt.

Beispiel:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/javascript">
  <!--
var arrKat = new Array();

// Erste Komponente - Kategorie-ID ist Index
arrKat["1"] = new Array();
// Unterkategorien zur ersten Kategorie-ID
arrKat["1"][0] = "Hauptkat 1 / Unterkategorie 1";
arrKat["1"][1] = "Hauptkat 1 / Unterkategorie 2";
arrKat["1"][2] = "Hauptkat 1 / Unterkategorie 3";
// Zweite Komponente - Kategorie-ID ist Index
arrKat["2"] = new Array();
// Unterkategorien zur ersten Kategorie-ID
arrKat["2"][0] = "Hauptkat 2 / Unterkategorie 1";
arrKat["2"][1] = "Hauptkat 2 / Unterkategorie 2";
// Dritte Komponente - Kategorie-ID ist Index
arrKat["3"] = new Array();
// Unterkategorien zur ersten Kategorie-ID
arrKat["3"][0] = "Hauptkat 3 / Unterkategorie 1";
arrKat["3"][1] = "Hauptkat 3 / Unterkategorie 2";
arrKat["3"][2] = "Hauptkat 3 / Unterkategorie 3";
arrKat["3"][3] = "Hauptkat 3 / Unterkategorie 4";
arrKat["3"][4] = "Hauptkat 3 / Unterkategorie 5";

function updateSub(objForm, strKey){
  var objSelSub = objForm.selUnter;

  // Bestehende Liste löschen
  objSelSub.options.length = 0;

  // Falls der default-Zustand gewählt wird
  if(strKey == "default") return;

  // Unterkategorie-Array durchlaufen
  for(var i=0; i<arrKat[strKey].length; i++){
    // Neues Options-Objekt (value = Hauptkat_Unterkat)
    objOption = new Option(arrKat[strKey][i], (strKey+"_"+i), false, false);
    // Option in Liste einhängen
    objSelSub.options[objSelSub.length] = objOption;
  }
}
  -->
</script>
</head>
<body>
<form method="" action="">
  <div>
    <select name="selHaupt" size="1" onchange="updateSub(this.form, this.value)">
      <option value="default">- Bitte wählen -</option>
      <option value="1">Kategorie 1</option>
      <option value="2">Kategorie 2</option>
      <option value="3">Kategorie 3</option>
    </select>
  </div>
  <div>
    <select name="selUnter" size="1">
      <option value="default"></option>
    </select>
  </div>
</form>
</body>
</html>
Vielleicht hilft dir das weiter.

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

Neue Beiträge

Zurück