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

Answer 1

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.

Answer 2

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.

Answer 3

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>