小编典典
将“每个”替换为“更改”
$('select[id$=-status][id^=id_item-]').change(
function (){
var color = $('option:selected',this).css('background-color');
$(this).css('background-color',color);
}
).change();
这适用于Chrome。
另请参阅:http :
//docs.djangoproject.com/en/dev/ref/contrib/admin/#modeladmin-media-
definitions
支持django admin中的自定义CSS。
而且我认为正确的CSS属性是:'background-color'。 backgroundColor是javascript,应按以下方式使用:
$(this).css({backgroundColor:color});但是它似乎仍然可以正常工作,所以没什么大不了的。
编辑:
如果要在页面加载时初始化脚本,则只需在后面添加.change()即可。参见代码。
我也在firefox中进行了测试,并且也看到了这种奇怪的行为(蓝色,蓝色?)。
另一个编辑:
好的,所以这是Firefox的快速修复:
$('select[id$=-status][id^=id_item-]').children().each(function (){
if($(this).val() == 0){
$(this).attr('style', 'background-color:white;');
}
if($(this).val() == 1){
$(this).attr('style', 'background-color:green;');
}
if($(this).val() == 2){
$(this).attr('style', 'background-color:red;');
}
if($(this).val() == 3){
$(this).attr('style', 'background-color:orange;');
}
});
$('select[id$=-status][id^=id_item-]').change(function (){
var style = $(this).find('option:selected').attr('style');
$(this).attr('style', style);
}).change();
最后编辑:
如果使用CSS,甚至可以做到这一点:
select option,
select {
background-color:white;
}
select option[value="1"],
select.o1
{
background-color:green;
}
select option[value="2"],
select.o2
{
background-color:red;
}
select option[value="3"],
select.o3
{
background-color:orange;
}
$('select[id$=-status][id^=id_item-]').change(function (){
var color = $(this).find('option:selected').val();
$(this).removeClass('o1 o2 o3').addClass('o' + $(this).find('option:selected').val());
}).change();
另一个编辑:
我碰到了这一点,发现可以将其缩短,所以我只是为了好玩而已:
$('select[id$=-status][id^=id_item-]').children().each(function() {
var colors = ['white', 'green', 'red', 'orange'];
$(this).attr('style', 'background-color:' + colors[$(this).val()] + ';');
});
$('select[id$=-status][id^=id_item-]').change(function() {
$(this).attr('style', $(this).find('option:selected').attr('style'));
}).change();
2020-05-16