取决于使用jQuery

这HTML代码取决于使用jQuery

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

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

来源

2017-10-04 mr.howtocode

看起来像一个重复：https://stackoverflow.com/q/34882354/1531971 – jdv

使用的一类 - IDS是为了是唯一的，如这样的jquery只会将它找到的第一个对象与该id相区别并忽略所有其他对象。 Id =标识符，如果它与其他东西相同，则不能识别某些东西 – Pete

试试这个：

$(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，否则背景将更改为第一个选项设置为。

来源

2017-10-04 14:49:44

非常感谢你的工作！ –

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

来源

2017-10-04 14:47:24 will

不知道。感谢非常感谢的信息！ –

id需要是唯一的。除了创建一个通用函数并触发该函数onchange的select。值val()将给当前选定的选项。使用该值作为CSS属性值

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>

来源

2017-10-04 14:53:31 brk

感谢您的另一种方式！ –

取决于使用jQuery

回答

相关问题