如何动态修改jQuery多选select下拉菜单背景颜色?
问题描述:
我有多个选择下拉的背景颜色,我试图显示为红色或绿色的'确认'或'未确认'都1)在页面加载取决于选择哪个选项,和2)更新每个背景颜色选择更改框。如何动态修改jQuery多选select下拉菜单背景颜色?
目前在页面加载两个选择框显示绿色确认的背景颜色,就好像它正在评估第一,而不是评估第二个'未确认'选定的下拉列表添加红色背景颜色 - 我试图在每个()似乎没有用。
如何获得第二个选择以在加载和更改时应用正确的背景色?我的代码不正确?
谢谢!
<select class="rez">
<option value="Not Confirmed">Not Confirmed</option>
<option value="Confirmed" selected="selected">Confirmed</option>
</select>
<select class="rez">
<option value="Not Confirmed" selected="selected">Not Confirmed</option>
<option value="Confirmed">Confirmed</option>
</select>
$(function(){
$('.rez').each(function(){
if($('.rez option:selected').val() == 'Confirmed'){
$('.rez').css('background-color', 'green');
}
if($('.rez option:selected').val() == 'Not Confirmed'){
$('.rez').css('background-color', 'red');
}
});
$('.rez').change(function() {
if ($('.rez option:selected').text() == 'Confirmed') {
$('.rez').css('background-color', 'green');
}
if ($('.rez option:selected').text() == 'Not Confirmed') {
$('.rez').css('background-color', 'red');
}
});
});
答
我认为你正在寻找这样的:
$('.rez').each(function() {
if ($('.rez option:selected').val() == 'Confirmed') {
$('.rez').css('background-color', 'green');
}
if ($('.rez option:selected').val() == 'Not Confirmed') {
$('.rez').css('background-color', 'red');
}
});
$('.rez').change(function() {
if ($(':selected', this).text() == 'Confirmed') {
$(this).css('background-color', 'green');
}
if ($(':selected', this).text() == 'Not Confirmed') {
$(this).css('background-color', 'red');
}
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="rez">
<option value="Not Confirmed">Not Confirmed</option>
<option value="Confirmed" selected="selected">Confirmed</option>
</select>
<select class="rez">
<option value="Not Confirmed" selected="selected">Not Confirmed</option>
<option value="Confirmed">Confirmed</option>
</select>
你并不需要在功能使用选择。相反,您可以使用this
。
+0
非常感谢你的回应!非常感谢和帮助! – Jibes 2014-10-03 17:24:42
答
更新您的jQuery代码到这一点:
$(function(){
$('.rez').each(function(){
if($(this).val() == 'Confirmed'){
$(this).css('background-color', 'green');
}
if($(this).val() == 'Not Confirmed'){
$(this).css('background-color', 'red');
}
});
$('.rez').change(function() {
if ($(this).val() == 'Confirmed') {
$(this).css('background-color', 'green');
}
if ($(this).val() == 'Not Confirmed') {
$(this).css('background-color', 'red');
}
});
});
答
您需要修改某些位,如同时使用.each()
环和Click事件处理程序中的错误选择。
此外,您的代码可以恢复到这一点:
$(function() {
// A single function to toggle the background color.
function toggleBackground() {
$('.rez').each(function (ix, el) {
// Toggle the color based on the selected value.
$(this).css('background-color', $(this).val() == 'Confirmed' ? 'green' : 'red');
});
}
// Work out the initial background color.
toggleBackground();
// If any select changes, toggle its background color.
$('.rez').on('change', toggleBackground);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="rez">
<option value="Not Confirmed">Not Confirmed</option>
<option value="Confirmed" selected="selected">Confirmed</option>
</select>
<select class="rez">
<option value="Not Confirmed" selected="selected">Not Confirmed</option>
<option value="Confirmed">Confirmed</option>
</select>
答
您应该更改为$(这个)你.rez的引用。这样做将确保它检查.rez的每个实例,而不是检查页面上的第一个实例,这就是现在代码失败的原因。 (”苏亚雷斯 ')。
的代码应该结束了这样
$('.rez').each(function(){
if($(this).val() == 'Confirmed'){
$(this).css('background-color', 'green');
}
else
{
$(this).css('background-color', 'red');
}
});
$('.rez').change(function() {
if ($(this).val() == 'Confirmed') {
$(this).css('background-color', 'green');
}
else
{
$(this).css('background-color', 'red');
}
});
'$ CSS('应该是'$(本)的.css(' – melancia 2014-10-01 21:08:56
这 - '$(' REZ选项:selected')'应该是'$(this).find('option:selected')' – 2014-10-01 21:10:14
@ Al.G。我不同意'$(this).val()'就足够了 – melancia 2014-10-01 21:11:58