Dropdown Menu mit Unterkategorien

[HamPorts]

Hallo Forum,

Mich hat ein Problem mit meinem Dropdown Menu so geärgert das ich eure Hilfe brauche... ;)

Ich möchte gerne ein Dropdown Menu mit mehreren Unterkategorien erstellen. Aussehen soll es so wie hier:
Verschachtelte Auswahllisten (Menüstruktur) definieren - optgroup

Der Code dafür sieht so aus:

<form action="select_optgroup.htm">
  <p>Zur Auswahl stehen:</p>
  <p>
    <select name="Namen" size="6">
      <optgroup label="Namen mit A">
        <option label="Anna">Anna</option>
        <option label="Achim">Achim</option>
        <option label="August">August</option>
      </optgroup>
      <optgroup label="Namen mit B">
        <option label="Berta">Berta</option>
        <option label="Barbara">Barbara</option>
        <option label="Bernhard">Bernhard</option>
      </optgroup>
      <optgroup label="Namen mit C">
        <option label="Caesar">Caesar</option>
        <option label="Christiane">Christiane</option>
        <option label="Christian">Christian</option>
      </optgroup>
    </select>
  </p>
</form>

Nun möchte ich es gerne noch so hinbiegen das, wenn man eine Auswahl anklickt man nur noch auf einen Button "Go" klicken muss und dann einem Link folgt. Quasi wie dieser Code hier:

<form name="jump">
<select name="menu">
<option value="http://">Nummer 1</option>
<option value="http://">Nummer 2</option>
<option value="http://">Nummer 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>

So nun seit ihr gefragt ;) Kann mir einer helfen oder eben einen Anstoß geben ?

Danke und Gruß
Basti

 

[threadi]

Es kommt auf diesen JavaScript-Code an:

location=document.jump.menu.options[document.jump.menu.selectedIndex].value;

FalFalls du das bei Auswahl einer select-option ausführen willst müsstest Du es im select-Tag per Eventhandler onselect oder onchange ausführen.

 

[HamPorts]

Es kommt auf diesen JavaScript-Code an:

location=document.jump.menu.options[document.jump.menu.selectedIndex].value;

FalFalls du das bei Auswahl einer select-option ausführen willst müsstest Du es im select-Tag per Eventhandler onselect oder onchange ausführen.

Danke schonmal, Hilft mir weiter :-)

Nur was sollte ich in diesen Spalten noch ändern ?

<option label="Anna">Anna</option>

Schließlich muss Value noch irgendwo in den Spalten untergebracht werden :???:

Danke!

 

[threadi]

Es muss heißen

<option value="Anna">Anna</option>

Ein Attribut "label" gibt es bei option imho nicht.

 

[HamPorts]

Es muss heißen

<option value="Anna">Anna</option>

Ein Attribut "label" gibt es bei option imho nicht.

An welche Stelle muss ich die URL dann setzen ? :???:

 

[threadi]

Dachte das wäre ersichtlich aus dem JavaScript?

<option value="Anna.html">Anna</option>

 

[Efchen]

Moin,

es muss übrigens korrekterweise "window.location.href=..." heißen.

Aber warum eigentlich so kompliziert? Warum nicht eine Liste von Links, die auch funktioniert, wenn JavaScript abgeschaltet ist?

Gruß,
-Efchen