如何使用javascript仅更改选定选项的背景颜色？

Question

I'm trying to change background color when user selects some option. I did it with onchange function that simply contains:

function colorSameValues(select, color){
    for (var i=0; i<selects.length; i++){
        if (selects[i].value ==='') selects[i].style.backgroundColor='';
        if (selects[i].value === select.value) selects[i].style.backgroundColor=color;
    }
}

but it changes background color of all options.

I also saw on the internet how to change color of selected option, but it doesn't change option that is displayed, like here (first response) - Change the color of an option when selected - JavaScript

I would like to color displayed option, and when user clicks on this select to see other options I would like them not to be colored at all. Any ideas?

This is what I am trying to get

Answer 1

You have to access the selected option and change the background

 function a(e) { e.options[e.selectedIndex].style.backgroundColor=e.options[e.selectedIndex].textContent; console.log(e.options[e.selectedIndex].textContent) }

 <select onchange="a(this)"> <option>Red</option> <option>Blue</option> <option>Green</option> </select>

Answer 2

Try like this.

I added a css for option background. and in JS, I set the background for select box.

 function changeColor(colorParam) { let color = colorParam.value.toLowerCase(); var optionElement = document.getElementById('rgb'); optionElement.style.background = color; };

 option{ background:#fff; }

 <select onchange="changeColor(this);" class="color" id="rgb"> <option id="red" value="Red">Red</option> <option id="green" value="Green">Green</option> <option id="blue" value="Blue">Blue</option> <option id="white" value="White">White</option> <option id="pink" value="Pink">Pink</option> </select>

Answer 3

Try this

$('button#first').on('click', function() {
  $('#mySelect option').attr('selected', false);  // clears all
  var options = [];
  for (var i=0; i < $('#mySelect optgroup[label="first"] option').length; i++){
    options.push($('#mySelect optgroup[label="first"] option')[i].value);
  };
  $('#mySelect').val(options);
  $("#mySelect").trigger("chosen:updated");       // updates chosen
  return false;                                   // returns false not to post the surrounding form
});