Frage Andere Select-Feld Darstellung

[drumer]

Ich habe ein <select>-Feld mit drei <optgroup> Tags:

<select>
  <optgroup label="A">
   <option>A1</option>
   <option>A2</option>
 </optgroup>
 <optgroup label="B">
   <option>B1</option>
   <option>B2</option>
 </optgroup>
  <optgroup label="C">
   <option>C1</option>
   <option>C2</option>
 </optgroup>
</select>

Dieser Code wird so Dargestellt:


Ich habe mir die Darstellung mit den <optgroup>-Tags anders Vorgestellt. Z.B. So: (Bild passt nicht zum Code oben. Ich habe es auf https://wiki.selfhtml.org/wiki/HTML/Formulare/Auswahllisten gefunden.)

Ist es Möglich mit css oder so die letztere Darstellung zu bekommen?

Vielen Dank schon im Voraus.
drumer

 

[scbawik]

Ich habe ein <select>-Feld mit drei <optgroup> Tags:

<select>
  <optgroup label="A">
   <option>A1</option>
   <option>A2</option>
 </optgroup>
 <optgroup label="B">
   <option>B1</option>
   <option>B2</option>
 </optgroup>
  <optgroup label="C">
   <option>C1</option>
   <option>C2</option>
 </optgroup>
</select>

Dieser Code wird so Dargestellt:
Anhang anzeigen 4730

Ich habe mir die Darstellung mit den <optgroup>-Tags anders Vorgestellt. Z.B. So: (Bild passt nicht zum Code oben. Ich habe es auf https://wiki.selfhtml.org/wiki/HTML/Formulare/Auswahllisten gefunden.)

Ist es Möglich mit css oder so die letztere Darstellung zu bekommen?

Vielen Dank schon im Voraus.
drumer

Nein, das ist Abhängig vom Browser/OS.

Du könntest dir selbst das ganze natürlich auch via CSS und JS nachbauen, ist jedoch schon eher aufwändig wenn Tastatur etc. auch noch funktionieren soll. Vielleicht findest du da auch was fertiges.

 

[drumer]

Ja. Habe ich mir schon gedacht.

 

[drumer]

Aber was fertiges finde ich im Internet nicht.
:(
Habt ihr was?

 

[drumer]

Ich schau mal...

 

[drumer]

Ich habe da eine Idee wie man das mit JavaScript machen könnte:

Man versteckt von Anfang an die <option>-Tags in den <optgroups>-Tags mit display:none und zeigt dann per JavaScript bei Klick auf ein <optgroup>-Tag die dazugehörigen <option>-Tags an.
Müsste funktionieren.

 

[drumer]

<select>
  <optgroup label="A" onclick="javascript:document.getElementById('a').style.display = 'block';">
   <option id='a' style='display:none'>A1</option>
   <option id='a' style='display:none'>A2</option>
 </optgroup>
 <optgroup label="B" onclick="javascript:document.getElementById('b').style.display = 'block';">
   <option id='b' style='display:none'>B1</option>
   <option id='b' style='display:none'>B2</option>
 </optgroup>
  <optgroup label="C" onclick="javascript:document.getElementById('c').style.display = 'block';">
   <option id='c' style='display:none'>C1</option>
   <option id='c' style='display:none'>C2</option>
 </optgroup>
</select>

Sollte doch eigentlich funktionieren. Tut es bei mir aber nicht.