CODEWITHSUNDEEP
javascriptcsshtml
mughees ilyas
mughees ilyas

Reputation: 526

Change background color of drop down menu on select

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>

Upvotes: 0

Views: 11376

Answers (3)

wong ian
wong ian

Reputation: 123

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>

Upvotes: 2

qtgye
qtgye

Reputation: 3610

Here you go:

DEMO

$('select option').click(function(){
    $(this).css('background','yellow');   
});

Upvotes: 0

Mairaj Ahmad
Mairaj Ahmad

Reputation: 14624

Try this

 $('yourdropdownid option:selected').css('background-color', 'red');

Upvotes: 0

Related Questions