使用jQuery根据值更改下拉列表的背景颜色

Question

这是HTML代码

<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输出

：

脚本

$(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);
  });
});

但它只会改变第一个实例的bg颜色

如何在每个下拉列表中实现脚本更改

Answer 1

试试这个：

$(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>

通过使用类，jQuery将找到多个要使用的元素。 ID必须是唯一的，因此它假定它只是一个元素。

您应该使用this而不是在函数中再次搜索值，否则背景将更改为第一个选项设置的内容。

Answer 2

您无法在网页上多次使用相同的ID - ID必须是唯一的。如果你试图找到它，它只会得到第一个，因为只有一个应该存在。而是使用.form-control类作为选择器。

Answer 3

id需要独一无二。除了创建一个通用函数并在select的更改时触发该函数。值val()将给出当前选择的选项。将该值用作css属性值

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;