Dropdown Listenelemente formatieren

[gogolo]

Hallo

Ich würde gerne die einzelnen Elemente einer Dropdownliste formatieren. Ich habe folgende Lösung gefunden:

<select name="filter_cat">
<option value="11" style="font-weight: bold">Widget</option>
</select>

Die funktioniert aber nur in Firefox, im Internetexplorer nicht. Gibt es eine Lösung für den IE?

Ich würde mich über Eure Hilfe freuen, da wir hier ein grösseres Befragungsprojekt haben, wo diese Funktion notwendig ist.
Mit bestem Gruss
Olivier

 

[scbawik]

Hallo

Ich würde gerne die einzelnen Elemente einer Dropdownliste formatieren. Ich habe folgende Lösung gefunden:

<select name="filter_cat">
<option value="11" style="font-weight: bold">Widget</option>
</select>

Die funktioniert aber nur in Firefox, im Internetexplorer nicht. Gibt es eine Lösung für den IE?

Ich würde mich über Eure Hilfe freuen, da wir hier ein grösseres Befragungsprojekt haben, wo diese Funktion notwendig ist.
Mit bestem Gruss
Olivier

Das geht nicht.
Einzige Möglichkeit wäre selber ein Dropdown mit JavaScript zu programmieren.
Wahrscheinlich gibt es auch bereits welche, die eine Formatierung der options ermöglichen.

 

[Banana_Jones]

Wenn es darum gehen soll, durch Schriftformatierungen eine gewisse Gruppierung der Elemente zu etablieren, könnte man auch auf <optgroup> zurückgreifen.
Andernfalls hat @scbawik Recht, das müsste über ein Javascript-Replacement gemacht werden. Wobei diese auch immer einen (wie ich finde) Usability-Nachteil, gerade im mobilen Bereich haben. Vielleicht würde sich es sich dann auch lohnen, darüber nachzudenken, ob die Befragung nicht anders strukturiert werden kann...

 

[gogolo]

Vielen Dank!! <optgroup> ist genau das, was ich wollte. Ist es mit diesem Befehl auch möglich, Daten zu erheben? Also so wie bei option value in dem Beispiel oben bei Auswahl "11" in eine Variable mittels Javascript abzuspeichern?.

Danke nochmals herzlich, für den Tipp.

Habe nun folgendes gefunden, aber es speichert leider nicht in die Variable v_30 ab:

<script type="text/javascript">
function find(val,idx) {
var sel=document.getElementById('v_30');
alert(val+' : '+sel.options[idx].parentNode.label);
}
</script>

<select id="v_30" size=1 ondblclick="find(this.value,this.selectedIndex)">
<optgroup label="group1">
<option value=1>item1</option>
<option value=2>item2</option>
<option value=3>item3</option>
</optgroup>
</select>

Weiss hier jemand Rat? Danke!

 

[gogolo]

Sorry, ich antworte mir selber. Es ist ganz einfach, falls es mal jemand braucht:

<label for="v_31"></label>
<select id="v_31" name="v_31" class="selectbox" >
<optgroup label="1 Situation erfassen">
<option class="selectbox" value="2" >1.1 Erstgespräch </option>
<option class="selectbox" value="3" >1.2 Eintritt / Neuaufnahme gestalten </option>
<option class="selectbox" value="4" >1.3 Situation einschätzen </option>
</optgroup>