Change Select option color using each option's value renege

Question

I have select option, I wish to change option color with red, with option value renege 1450 to 1454.

<select id='test'>
<option value="1463">SAHABAN CHAK</option>
<option value="1462">SAHABAJPUR</option>
<option value="1461">PAR DEONAPUR SOVAPUR</option>
<option value="1460">LAXMIPUR</option>
<option value="1459">KUMBHIRA</option>
<option value="1458">KRISHNAPUR</option>
<option value="1457">GOLAPGANJ</option>
<option value="1456">CHARI ANANTAPUR</option>
<option value="1455">BIRNAGAR-II</option>
<option value="1454">BIRNAGAR-I</option>
<option value="1453">BHAGABANPUR</option>
<option value="1452">BEDRABAD</option>
<option value="1451">BAKHRABAD</option>
<option value="1450">AKANDABARIA</option>

</select>

`

As far as I know, we can not apply any css on `option`. You need to use any third party plugin for this. You can refer to this link: https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element — Rohit Mittal, Aug 18 '19 at 08:38
Possible duplicate of [How to style the option of an html "select" element?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element) — Rohit Mittal, Aug 18 '19 at 08:40

score 0 · Answer 1 · answered Aug 18 '19 at 07:22

You need to loop through the options and add red where it's relevant

$("#test option").each(function(){
    if((this.value >= 1450) && (this.value <= 1454)){
      $(this).css('background','red');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='test'>
<option value="1463">SAHABAN CHAK</option>
<option value="1462">SAHABAJPUR</option>
<option value="1461">PAR DEONAPUR SOVAPUR</option>
<option value="1460">LAXMIPUR</option>
<option value="1459">KUMBHIRA</option>
<option value="1458">KRISHNAPUR</option>
<option value="1457">GOLAPGANJ</option>
<option value="1456">CHARI ANANTAPUR</option>
<option value="1455">BIRNAGAR-II</option>
<option value="1454">BIRNAGAR-I</option>
<option value="1453">BHAGABANPUR</option>
<option value="1452">BEDRABAD</option>
<option value="1451">BAKHRABAD</option>
<option value="1450">AKANDABARIA</option>

</select>

Change Select option color using each option's value renege

1 Answers1