Question

56

Change background color of drop down menu on select

rated 0 times [ 61] [ 5] / answers: 1 / hits: 11210 / 10 Years ago, fri, october 10, 2014, 12:00:00

How to change colour of drop down menu. Like if i have a drop down menu with 5 options, when ever i click an option i want that option to change colour so that i can keep track which options i have already selected. ( 5 here is hypothetical, i have bigger list with IP`s and ports as field so cannot remember all the fields i have checked).

Lets just assume my drop down is

<select>

    <option val=>Please choose</option>

    <option val=1>Option 1</option>

    <option val=2>Option 2</option>

    <option val=3>Option 3</option>

    <option val=4>Option 4</option>

    <option val=5>Option 5</option>

</select>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

annie

Add To Favorites

Follow

Total Points: 483

Total Questions: 97

Total Answers: 107

Location: Belarus

Member since Sat, Jul 18, 2020

4 Years ago

answered 10 Years ago dequant · Accepted Answer

var select = document.getElementById('select');

select.onchange = function() {

  select.options[select.selectedIndex].style.backgroundColor = 'red';

}



var clean = document.getElementById('clean');

clean.onclick = function() {

    for(var i = 0; i < select.options.length; i++) {

      select.options[i].style.backgroundColor = '';  

    }

}

<select id=select>

    <option val=>Please choose</option>

    <option val=1>Option 1</option>

    <option val=2>Option 2</option>

    <option val=3>Option 3</option>

    <option val=4>Option 4</option>

    <option val=5>Option 5</option>

</select>



<button type=button id=clean>Clean</div>