Probleme mit <select option>

Webstreuner · 04.07.2012

Hallo zusammen,
ich bitte um Hilfe bei folgendem Problem:
Zum Ändern der Farbe gibt es ein OPTION Feld

echo '<select name="'.$key.'" onChange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor" size="1">"
<option class="farbe" style="color:#000000 ; background-color:#FFFFFF">wähle Farbe</option>
<option class="farbe" style="color:#FFFFFF ; background-color:#FFFFFF">#FFFFFF</option>
<option class="farbe" style="color:#FFFFCC ; background-color:#FFFFCC">#FFFFCC</option>

etc…

was auch sauber läuft.
Um den Code (216 Farben) zu kürzen, habe ich die Farben in ein array gepackt und gebe sie mit einer for – Anweisung aus:
for ($i=0; $i <= $arrycount; $i++) {
echo "<option class=\"farbe\" style=\"color:" . $farbe[$i] . "; background-color:" . $farbe[$i] . "\">".$farbe[$i] ."</option>";
etc …
was auch sauber läuft.

Nun der Knackpunkt:
die Zurzeit vorhandene Farbe soll als selected angezeigt werden. Dazu mußte ich den Code erweitern:
for ($i=0; $i <= $arrycount; $i++) { if ($gesfarbe == $farbe[$i]) {
echo "<option selectd class=\"farbe\" style=\"color:" . $farbe[$i] . "; background-color:" . $farbe[$i] . "\">".$farbe[$i] ."</option>";
}else{
echo "<option class=\"farbe\" style=\"color:" . $farbe[$i] . "; background-color:" . $farbe[$i] . "\">".$farbe[$i] ."</option>";
}

Was aber nicht ganz funktioniert, die selected Farbnummer wird im Auswahlfeld vorgegeben nicht aber die Schriftfarbe und auch nicht der Hintergrund.
Hat jemand einen Lösungsvorschlag?

Duddle · 04.07.2012

AW: Probleme mit <select option>

Die Hintergrundfarbe wird durch den JavaScript-Code im onChange des <select>-Elementes geändert. Dieser Event / Code wird nur bei Änderung des Wertes ausgelöst, d.h. wenn ein Nutzer aktiv eine Option auswählt. Das Laden der Seite führt diesen Event nicht aus.

Du kannst deinen Code aus dem onChange in eine Funktion packen und diese jeweils bei onChange (wie bisher) und zusätzlich aufrufen. Du musst dann im Code nur noch die "this" durch die korrekt ausgewählten Elemente ersetzen (z.B. per ), dann funktioniert das.

Duddle

Webstreuner · 04.07.2012

AW: Probleme mit <select option>

Sorry, aber ich brauch noch etwas Hilfe. Ich habe nun den Code so umgebaut:

<script language="JavaScript" type="text/javascript">
function FarbAnzeige1() {
document.getElementById("wert1").style.backgroundColor=document.getElementById("wert1").options[document.getElementById("wert1").selectedIndex].style.backgroundColor
}
function FarbAnzeige2() {
document.getElementById("wert2").style.backgroundColor=document.getElementById("wert2").options[document.getElementById("wert2").selectedIndex].style.backgroundColor
}
</script>

echo '<select id="wert1" name="'.$key.'" size="1" onChange="FarbAnzeige1()" >';
echo '<option class="farbe" style="color:#000000 ; background-color:#FFFFFF">wähle Farbe</option>';
for ($i=0; $i <= $arrycount; $i++) {
if ($gesfarbe == $farbe[$i]) {
echo '<option id="wert2" onLoad="FarbAnzeige2()" selected class="farbe" style="color:' . $farbe[$i] . '; background-color:' . $farbe[$i] . '"> '. $farbe[$i] .'</option>';
}else{
echo "<option class=\"farbe\" style=\"color:" . $farbe[$i] . "; background-color:" . $farbe[$i] . "\">".$farbe[$i] ."</option>";
}
}
echo "</select>";

Ich weiss die Funktionen sind gedoppelt, sollte nur bei der Fehlersuch helfen.
Aber es funktionirt nicht, der SELECTED Teil zeigt immer nur die Farbnummer in der Standard Farbe (schwarz) nicht den Hintergrund und nicht die Schriftfarbe.
Eben, wie vorher auch

Warum, was bitte ist falsch??

Gruß vom Streuner

Duddle · 04.07.2012

AW: Probleme mit <select option>

Das funktioniert so nicht. Der onLoad-Event kann meines Wissens nach nicht an arbiträre/frei wählbare Elemente gehangen werden, sondern nur auf body bzw. das window-Objekt.

Zum Beispiel:

HTML:

<body onLoad="halloWelt()">
  <h1>Website</h1>
  <script type="text/javascript">
    function halloWelt() {
      alert("Hey!");
    }
  </script>
</body>

bzw. gleichbedeutend

HTML:

<body>
  <h1>Website</h1>
</body>
  <script type="text/javascript">
    window.onLoad = halloWelt;
    function halloWelt() {
      alert("Hey!");
    }
  </script>

Es sollte reichen, wenn du deine jetzige FarbAnzeige1-Funktion beim Laden der Seite aufrufst und das ganze Zeug für FarbAnzeige2 entfernst (ist unnötig).

Kleine Bitte noch: in Zukunft Code in [ PHP] [ /PHP] bzw. [ CODE] [ /CODE] (ohne Leerzeichen) packen, dann kann man das besser lesen.

Duddle

Webstreuner · 11.07.2012

AW: Probleme mit <select option>

Hallo Dubble,

-das mit Farbe2 usw. hatte ich oben geschrieben war nur zum Testen
-du hast Recht, beim laden der Seite das läuft
-die OPTION-Felder brauchen die Farbangaben dennoch, da sonst die Auswahl nur mit Schwarzer Schrift auf Weissen Grund dargestellt wird.

Danke für die Hilfe
Gruß vom Streuner