Как поменять background-color элемента select при клике на option?

392

17 октября 2017, 04:45

Хочу изменить цвет элемента. Есть элемент список но в качестве значений этого элемента я использую цвет background-color.

<select style="background-color: red;" class="select new">
  <option style="background-color: green;" value="green"></option>
  <option style="background-color: yellow;" value="yellow"></option>
  <option style="background-color: blue;" value="blue"></option>
  <option style="background-color: red;" value="red"></option>
</select>

Пробовал через jQuery:

$(option).click(funсtion(){ $(select).style("background-color:red;") });

Но так не получается. Как при клике на элемент option менять цвет элемента select?

Answer 1

При самом клике на option никак, надо использовать ивент change, когда меняется значение селекта :

Вариант на чистом JavaScript :

var select = document.querySelector('.select.new'); 
select.addEventListener('change', function() { 
  select.style.backgroundColor = select.value 
});

<select style="background-color: red;" class="select new"> 
  <option style="background-color: green;" value="green">green</option> 
  <option style="background-color: yellow;" value="yellow">yellow</option> 
  <option style="background-color: blue;" value="blue">blue</option> 
  <option style="background-color: red;" value="red">red</option> 
</select>

Вариант на JQuery :

var select = $('.select.new'); 
select.on('change', function() { 
  select.css('background-color', select.val()); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select style="background-color: red;" class="select new"> 
  <option style="background-color: green;" value="green">green</option> 
  <option style="background-color: yellow;" value="yellow">yellow</option> 
  <option style="background-color: blue;" value="blue">blue</option> 
  <option style="background-color: red;" value="red">red</option> 
</select>