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

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

• javascript
• html

• 1 can you add your code to see what you're exactely doing ? – bubbles Commented Aug 2, 2019 at 10:07
• I edited my question and put some code with image of what I would like to obtain – Sygol Commented Aug 2, 2019 at 10:33

3 Answers 3

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>

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>

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
});