CODEWITHSUNDEEP
jquerydrop-down-menuhtml-selectinteractive
Bob
Bob

Reputation: 63

Change color of HTML <option> Tag using id element after being clicked

I tried to find a solution for this but i haven't found what i want. this is an example :

<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select car:</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>

for example after clicking "Ford" option" it's color transforms to red . Am new to Jquery, and what i want to know is if that possible in the first place and if it is , then how ? Note that am targetting a single value, after condition is met. So what i wanna know is syntax that will change the color of the element related to some id (AFTER THE SELECT MENU CLOSES) if possible.

THANKS IN ADVANCE .

Upvotes: 0

Views: 43

Answers (1)

ellipsis
ellipsis

Reputation: 12152

Use find to find the selected option onchange and apply color using .css

$(document).ready(function() {
    $('select').change(function() {
    $(this).find('option').css('background-color', 'white');
      $(this).css('background-color', 'red');
  })
  
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select car:</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
  </select>
</div>

Upvotes: 1

Related Questions