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

问题

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

回答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.

回答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.

回答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>

来源：https://stackoverflow.com/questions/46567808/change-the-background-colour-of-dropdown-list-depending-on-values-using-jquery

标签

javascript

jquery

html

css