Forum PHP.pl > Lista rozwijalna w której każde pole będzie miało inny kolor.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Lista rozwijalna w której każde pole będzie miało inny kolor.

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

aksnet

7.04.2017, 10:05:45

Witam

Potrzebuję użyć listy rozwijalnej w której każde pole będzie miało inny kolor.
Lista ma już kolorki, ale jest jeden problem.:
po wybraniu myszką czegokolwiek z listy kolor tła wybranego elementu zmienia się na biały
(np. wybieram "zablokowany" i po wybraniu kolor tła zmienia się z czerwonego na biały, a nie powinien)

Czy jest na to sposób?

kod:

[HTML] pobierz, plaintext 
<select clas="select" name="action1">
<option value="a" selected="selected" style="background-color:#ffffff;">aktywny - bez komunikatów</option>
<option value=""  style="background-color:#FFD700;">zablokuj po przypomnieniach (po dacie)</option>
<option value="x" style="background-color:#FF4500;">zablokowany (po dacie)</option>
<option value="i" style="background-color:#32CD32;">tylko komunikat (po dacie)</option>
</select>
[HTML] pobierz, plaintext

rozwiązałem to trochę inaczej, może komuś się przyda

[HTML] pobierz, plaintext 
  <select clas="selectrr" name="action[]" onchange="java script:document.getElementById('color_square1').style.backgroundColor=this.options[this.selectedIndex].id;">
   <OPTION id="" VALUE="a" SELECTED>aktywny - bez komunikatów</OPTION>
   <OPTION id="Yellow" VALUE="">przypomnij i zablokuj (po dacie)</OPTION>
   <OPTION id="Red" VALUE="x">zablokowany (po dacie)</OPTION>
   <OPTION id="LimeGreen" VALUE="i"> tylko komunikat (po dacie)</OPTION>
  </select>
  <span id="color_square1" style="background-color:; border:thin solid;">&emsp;</span>
[HTML] pobierz, plaintext

czarkowy

8.08.2017, 13:55:12

Cytat(aksnet @ 7.04.2017, 11:05:45 )

[HTML] pobierz, plaintext 
  <select clas="selectrr" name="action[]" onchange="java script:document.getElementById('color_square1').style.backgroundColor=this.options[this.selectedIndex].id;">
   <OPTION id="" VALUE="a" SELECTED>aktywny - bez komunikatów</OPTION>
   <OPTION id="Yellow" VALUE="">przypomnij i zablokuj (po dacie)</OPTION>
   <OPTION id="Red" VALUE="x">zablokowany (po dacie)</OPTION>
   <OPTION id="LimeGreen" VALUE="i"> tylko komunikat (po dacie)</OPTION>
  </select>
  <span id="color_square1" style="background-color:; border:thin solid;">&emsp;</span>
[HTML] pobierz, plaintext

nie miesza się kodu html i javascript ;d

tu masz schludniejsze rozwiązanie:

[JAVASCRIPT] pobierz, plaintext 
let selectList = document.querySelector('.select');
 
function changeSelectBg() {
		let selectedOption = selectList.options[selectList.selectedIndex];
		selectList.style.backgroundColor = selectedOption.style.backgroundColor;
}
 
selectList.addEventListener('change', changeSelectBg, false);
[JAVASCRIPT] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.