Change the background colour of Dropdown list depending on values using jQuery [duplicate]

Question

This the HTML code

<label class="col-lg-6">37.sample 1 </label>
<select class="form-control" id="colorchg">
  <option></option>
  <option value="green">YES</option>
  <option value="red">NO</option>
  <option value="gray">N/A</option>
</select>

<label class="col-lg-6">38. sample 2</label>
<select class="form-control" id="colorchg">
  <option></option>
  <option value="green">YES</option>
  <option value="red">NO</option>
  <option value="gray">N/A</option>
</select>

<label class="col-lg-6">39. sample 3</label>
<select class="form-control" id="colorchg">
  <option></option>
  <option value="green">YES</option>
  <option value="red">NO</option>
  <option value="gray">N/A</option>
</select>

HTML output

:

Script

$(document).ready(function() {
  $("#colorchg").each(function() {
    var color = $("#colorchg").val();
    $(this).css("background", color);
  });
  $("#colorchg").change(function() {
    var color = $("#colorchg").val();
    $(this).css("background", color);
  });
});

But it only changes the bg-color of the first instance

How should the script change in order to implement it in every dropdown list

Looks like a duplicate: stackoverflow.com/q/34882354/1531971 — user1531971
– user1531971, Commented Oct 4, 2017 at 14:49
Use a class - ids are meant to be unique and as such jquery will only take the first object it finds with that id and disregard all others. Id = identifier, you can't identify something if it is the same as something else — Pete
– Pete, Commented Oct 4, 2017 at 14:53

Shiladitya · Accepted Answer · 2017-10-04 15:08:22Z

2

Try this:

$(document).ready(function() {
  $(".colorchg").each(function() {
    $(this).css("background", $(this).val());
  });
  $(".colorchg").change(function() {
    $(this).css("background", $(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-lg-6">37.sample 1 </label>
<select class="form-control colorchg">
  <option></option>
  <option value="green">YES</option>
  <option value="red">NO</option>
  <option value="gray">N/A</option>
</select>

<label class="col-lg-6">38. sample 2</label>
<select class="form-control colorchg">
  <option></option>
  <option value="green">YES</option>
  <option value="red">NO</option>
  <option value="gray">N/A</option>
</select>

<label class="col-lg-6">39. sample 3</label>
<select class="form-control colorchg">
  <option></option>
  <option value="green">YES</option>
  <option value="red">NO</option>
  <option value="gray">N/A</option>
</select>

By using classes, jQuery will find more than one element to use. ID's need to be unique, so it assumes it's only one element.

Instead of searching for the value again in the functions, you should use this, otherwise the backgrounds will change to whatever the first option is set to.

edited Oct 4, 2017 at 15:08

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

answered Oct 4, 2017 at 14:49

Rick

1,22913 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mr.howtocode Over a year ago

thank you so much it worked!

will · Accepted Answer · 2017-10-04 14:47:24Z

0

You can't use the same ID multiple times on a page - IDs need to be unique. If you try to find it, it'll only get the first one, since only one should exist. Instead use the class .form-control as your selector.

answered Oct 4, 2017 at 14:47

will

2,0071 gold badge14 silver badges19 bronze badges

1 Comment

mr.howtocode Over a year ago

Didn't know that. Thanks for the info much appreciated!

Shiladitya · Accepted Answer · 2017-10-04 15:09:59Z

0

id need to be unique. Beside create a common function and trigger that function onchange of select.The value val() will give current selected option. Use that value as css property value

function changeBck(elem) {
  $(elem).css("background", $(elem).val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-lg-6">37.sample 1 </label>
<select class="form-control" id="colorchg_1" onchange='changeBck(this)'>
  <option></option>
  <option value="green">YES</option>
  <option value="red">NO</option>
  <option value="gray">N/A</option>
</select>

<label class="col-lg-6">38. sample 2</label>
<select class="form-control" id="colorchg_2" onchange='changeBck(this)'>
  <option></option>
  <option value="green">YES</option>
  <option value="red">NO</option>
  <option value="gray">N/A</option>
</select>

<label class="col-lg-6">39. sample 3</label>
<select class="form-control" id="colorchg_3" onchange='changeBck(this)'>
  <option></option>
  <option value="green">YES</option>
  <option value="red">NO</option>
  <option value="gray">N/A</option>
</select>

edited Oct 4, 2017 at 15:09

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

answered Oct 4, 2017 at 14:53

brk

50.3k10 gold badges59 silver badges85 bronze badges

1 Comment

mr.howtocode Over a year ago

Thanks for the another way of doing it!

Collectives™ on Stack Overflow

Change the background colour of Dropdown list depending on values using jQuery [duplicate]

3 Answers 3

1 Comment

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Linked

Related