✔ Hintergrundfarbe per Auswahlliste, die mit Farbe hinterlegt ist

N

NTDY

Erfahrenes Mitglied
Ich habe dieses Script gefunden und wollte fragen, wie ich die einzelnen <option> mit Farbe unterlegen kann. Wörter wie die Farbe heißt mag sehr schön sein, aber wenn ich jemanden habe, der kein deutsch kann, soll er wenigstens anhand der Farbe eine Entscheidung treffen können. :-)

Vielen Dank

Code: 
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
function setColor () {
  var choice; 
    choice = document.colorForm.color.selectedIndex; 
      switch(choice) {
                case 0: document.bgColor = "FF0000"; break; 
                case 1: document.bgColor = "00FF00"; break; 
                case 2: document.bgColor = "0000FF"; break; 
                case 3: document.bgColor = "FFFFFF"; break; 
                case 4: document.bgColor = "FFFF00"; break; 
                case 5: document.bgColor = "FF00FF"; break; 
        } 
}
</SCRIPT>
</HEAD>
<BODY bgColor="FFFFFF"> 
<H1> Bitte eine Hintergrundfarbe auswählen: </H1>
<FORM NAME="colorForm"> 
<SELECT NAME="color" onChange=setColor()> 
        <OPTION VALUE="red">rot</option>
        <OPTION VALUE="green">gr&uuml;n</option>
        <OPTION VALUE="blue">blau</option> 
        <OPTION VALUE="white">wei&szlig;</option>
        <OPTION VALUE="yellow">gelb</option>
        <OPTION VALUE="purple">lila</option>
</SELECT> 
</FORM> 
</BODY>
</HTML>
 
Code: 
<select onchange="window.document.getElementsByTagName('body')[0].style['backgroundColor'] = this[this.selectedIndex].value;">
    <option value="#FF0000" style="background-color:#FF0000;">Rot</option>
    <option value="#00FF00" style="background-color:#00FF00;">Gr&amp;uuml;</option>
    <option value="#0000FF" style="background-color:#0000FF;">Blau</option>
</select>

// Oder, für non-DOM-Browser:

<select onchange="window.document.bgColor = this[this.selectedIndex].value;">
    <option value="#FF0000" style="background-color:#FF0000;">Rot</option>
    <option value="#00FF00" style="background-color:#00FF00;">Gr&amp;uuml;</option>
    <option value="#0000FF" style="background-color:#0000FF;">Blau</option>
</select>
 
Zuletzt bearbeitet von einem Moderator:
Hintergrund wird nach refresh wieder weiß

Der Code von Dir ist wirklich super. Du bist ja ein wahres JS Genie. Ich wollte jetzt noch fragen, wie man auch nach einem Aktualisieren der Seite noch die jeweilige Farbe behalten kann, da meine nach dem Aktualisieren wieder auf weiß zurückspringt.

Andreas
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück