Can't figure out, how to change select box color, when option selected

Question

I have HTML like this one:

<select onclick="colorchanger()">
  <option name="white" value="0">--Select--</option>
  <option name="red" value="1">Work</option>
  <option name="green" value="2">Doesn't Work</option>
</select>

I need to change select box color, when option is selected. I understand how to change color by using value, but i need to use name. Can anyone help? How to write javascript for this function?

it is not possible generally https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select — Honsa Stunna, Dec 01 '17 at 12:22

score 1 · Accepted Answer · answered Dec 01 '17 at 12:29

Try the following:

function colorchanger(op){
  var color = op.options[op.selectedIndex].getAttribute('name');
  op.style.backgroundColor=color;
}

<select onclick="colorchanger(this)">
  <option name="white" value="0">--Select--</option>
  <option name="red" value="1">Work</option>
  <option name="green" value="2">Doesn't Work</option>
</select>

score 0 · Answer 2 · answered Dec 01 '17 at 12:35

Use the 'onchange' handler. Shouldn't be necessary to change the color every click.

function colorChanger(select) {
  var color = select.options[select.selectedIndex].getAttribute('name');
  select.style.backgroundColor=color;
};

<select onchange="colorChanger(this);">
  <option name="white" value="0">--Select--</option>
  <option name="red" value="1">Work</option>
  <option name="green" value="2">Doesn't Work</option>
</select>

Can't figure out, how to change select box color, when option selected

2 Answers2