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

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: https://stackoverflow.com/q/34882354/1531971 — , Oct 04 '17 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, Oct 04 '17 at 14:53

score 2 · Accepted Answer · edited Oct 04 '17 at 15:08

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.

thank you so much it worked! – mr.howtocode Oct 04 '17 at 14:57 — mr.howtocode, Oct 04 '17 at 14:57

score 0 · Answer 2 · answered Oct 04 '17 at 14:47

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 04 '17 at 14:47

will

1,947
1
13
19

Didn't know that. Thanks for the info much appreciated! – mr.howtocode Oct 04 '17 at 14:58

score 0 · Answer 3 · edited Oct 04 '17 at 15:09

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>

Thanks for the another way of doing it! – mr.howtocode Oct 04 '17 at 15:03 — mr.howtocode, Oct 04 '17 at 15:03

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

3 Answers3

Linked

Related