Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Lista rozwijalna w której każde pole będzie miało inny kolor.
aksnet
post 7.04.2017, 10:05:45
Post #1





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 1.04.2017

Ostrzeżenie: (0%)
-----


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:

  1. <select clas="select" name="action1">
  2. <option value="a" selected="selected" style="background-color:#ffffff;">aktywny - bez komunikatów</option>
  3. <option value="" style="background-color:#FFD700;">zablokuj po przypomnieniach (po dacie)</option>
  4. <option value="x" style="background-color:#FF4500;">zablokowany (po dacie)</option>
  5. <option value="i" style="background-color:#32CD32;">tylko komunikat (po dacie)</option>


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


  1. <select clas="selectrr" name="action[]" onchange="java script:document.getElementById('color_square1').style.backgroundColor=this.options[this.selectedIndex].id;">
  2. <OPTION id="" VALUE="a" SELECTED>aktywny - bez komunikatów</OPTION>
  3. <OPTION id="Yellow" VALUE="">przypomnij i zablokuj (po dacie)</OPTION>
  4. <OPTION id="Red" VALUE="x">zablokowany (po dacie)</OPTION>
  5. <OPTION id="LimeGreen" VALUE="i"> tylko komunikat (po dacie)</OPTION>
  6. </select>
  7. <span id="color_square1" style="background-color:; border:thin solid;">&emsp;</span>
Go to the top of the page
+Quote Post
czarkowy
post 8.08.2017, 13:55:12
Post #2





Grupa: Zarejestrowani
Postów: 31
Pomógł: 1
Dołączył: 6.08.2017
Skąd: sdsadada

Ostrzeżenie: (0%)
-----


Cytat(aksnet @ 7.04.2017, 11:05:45 ) *
  1. <select clas="selectrr" name="action[]" onchange="java script:document.getElementById('color_square1').style.backgroundColor=this.options[this.selectedIndex].id;">
  2. <OPTION id="" VALUE="a" SELECTED>aktywny - bez komunikatów</OPTION>
  3. <OPTION id="Yellow" VALUE="">przypomnij i zablokuj (po dacie)</OPTION>
  4. <OPTION id="Red" VALUE="x">zablokowany (po dacie)</OPTION>
  5. <OPTION id="LimeGreen" VALUE="i"> tylko komunikat (po dacie)</OPTION>
  6. </select>
  7. <span id="color_square1" style="background-color:; border:thin solid;">&emsp;</span>


nie miesza się kodu html i javascript ;d

tu masz schludniejsze rozwiązanie:

[JAVASCRIPT] pobierz, plaintext
  1. let selectList = document.querySelector('.select');
  2.  
  3. function changeSelectBg() {
  4. let selectedOption = selectList.options[selectList.selectedIndex];
  5. selectList.style.backgroundColor = selectedOption.style.backgroundColor;
  6. }
  7.  
  8. selectList.addEventListener('change', changeSelectBg, false);
[JAVASCRIPT] pobierz, plaintext



Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 14:25