CODEWITHSUNDEEP
javascriptjqueryhtml
David Johns
David Johns

Reputation: 1714

Change color only the selected option but not all options in dropdown

I have dynamic drop down lists coming from back end in my HTML Like following. When I change options, I need to set the selected option color to dark red if I select "success". Otherwise option color is default. I setup a jQuery for this.

HTML:

<select class="ready-list">
  <option value="failed">Failed</option>
  <option value="completed">Completed</option>
  <option value="success">Success</option>
  <option value="droped">Droped</option>
</select>

jQuery:

$('.ready-list').on('change', function() {
   var selected_v = this.value;
   if (selected_v != "success") {
      $(this).css("color", "#a94442");
   }
   else {
      $(this).css("color", "black");
   }
});

when I select an option except "success", the option will appear in dark red. But when I click on the drop down list again, all the options are in dark red. I tried to reset the options color to default by on("click") event when clicking again on the drop down but seems not working. How can I change the color only the appearing option?

Here is an example what I currently have

http://jsfiddle.net/m1vpzjyq/1/

Upvotes: 2

Views: 3159

Answers (3)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

The issue is the context of $(this).

In this case, $(this) is $('.ready-list')... The <select> element. And, if I understand correctly, you want the selected <option> to change color based on it's value.

If you apply a color to an element... It also applies to the childs. So you have to also define something for them.

And I think you misused the operator in the value comarison. != should be == to set red if "success" is selected.

I need to set the selected option color to dark red if I select "success".

$('.ready-list').on('change', function() {
  var selected_v = this.value;
  $(this).find("option").css("color", "black");  // Set all options to black.
  $(this).css("color", "black");  // Set the select color to black.
  if (selected_v == "success") {
    $(this).find("option:selected").css("color", "#a94442");  // Set selected to red.
    $(this).css("color", "#a94442");  // Set the select color to red.
  }
  /*  This part is now useless...
  else {
    $(this).css("color", "black");
  }*/
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="ready-list">
  <option value="failed">Failed</option>
  <option value="completed">Completed</option>
  <option value="success">Success</option>
  <option value="droped">Droped</option>
</select>

Edit

Here is a shorter JS version for the same result... Using 2 CSS rules and a class.

$('.ready-list').on('change', function() {
  (this.value == "success") ?
    $(this).addClass("success-selected") : $(this).removeClass("success-selected")
});
/* To apply the dark red color to the <select> elements */
.success-selected{
  color:#a94442;
}
/* For the options that should remain black */
.success-selected>option:not(:checked){
  color:black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="ready-list">
  <option value="failed">Failed</option>
  <option value="completed">Completed</option>
  <option value="success">Success</option>
  <option value="droped">Droped</option>
</select>

Upvotes: 4

Tej Narayan
Tej Narayan

Reputation: 37

Hope the below code will solve your problem,

 $('.ready-list').on('change', function() {
    var selected_v = $('.ready-list').find(":selected");
    $(selected_v).siblings().css("color", "black");   
    if (selected_v.text() != "Success") {
    $(selected_v).css("color", "#a94442");
    }
   });

Upvotes: 0

James
James

Reputation: 22247

I don't see the point of the event handler so I would just style the options with css

.ready-list option {
  color: #a94442;
}
.ready-list option[value='success'] {
  color: black;
}
<select class="ready-list">
  <option value="failed">Failed</option>
  <option value="completed">Completed</option>
  <option value="success">Success</option>
  <option value="droped">Droped</option>
</select>

Upvotes: 1

Related Questions