select per Auswahl mit Hintergrundfarbe versehen

Angenommen man möchte ein Select-Feld nicht mit Texten ausgeben, sondern mit Farben und bei Auswahl einer Farbe soll dann das Select-Feld diese als Hintergrundfarbe annehmen:

<select name="foo">
    <option value="FF6600" style="background-color: #FF6600"></option>
    <option value="669900" style="background-color: #669900"></option>
</select>

Leider funktioniert das nur im IE, jedoch nicht im Firefox (Opera und Safari hab ich nicht getestet …):


Per Javascript-Funktion kann man das Problem lösen:

<!-- innerhalb <head> -->
<script type="text/javascript">
    function chgBackgr(id) {
        slctField = document.getElementById(id);
        slctField.style.backgroundColor='#'+slctField.value;
    }
</script>

Der Aufruf geschieht dann wie folgt:

<select name="foo" id="foo" onchange="chgBackgr(foo)">
    <option value="FF6600" style="background-color: #FF6600"></option>
    <option value="669900" style="background-color: #669900"></option>
</select>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.