Drukowana wersja tematu

Napisany przez: 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 
<http://december.com/html/4/element/select.html clas="select" name="action1">
<http://december.com/html/4/element/option.html value="a" selected="selected" style="background-color:#ffffff;">aktywny - bez komunikatów</http://december.com/html/4/element/option.html>
<http://december.com/html/4/element/option.html value=""  style="background-color:#FFD700;">zablokuj po przypomnieniach (po dacie)</http://december.com/html/4/element/option.html>
<http://december.com/html/4/element/option.html value="x" style="background-color:#FF4500;">zablokowany (po dacie)</http://december.com/html/4/element/option.html>
<http://december.com/html/4/element/option.html value="i" style="background-color:#32CD32;">tylko komunikat (po dacie)</http://december.com/html/4/element/option.html>
</http://december.com/html/4/element/select.html>
[HTML] pobierz, plaintext 

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

Napisany przez: czarkowy 8.08.2017, 13:55:12

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

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

[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