Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

css - Set background colour of select to selected option in JQuery

Follow-up to this question: Setting background-color of select options in JQuery

I have a page with multiple select boxes, as per the following:

<select name="item-0-status" id="id_item-0-status">
<option value="">---------</option>
<option value="1">Online</option>
<option value="2">Offline</option>
<option value="3">Unknown</option>
</select>

These are being auto-generated in django, so it is not possible to apply css classes, ids or attributes directly to the options. The select elements have ids of 'item-0-status','item-1-status','item-2-status' etc.

I am allocating colours to the options via the following JQuery code:

$('select[id$=-status][id^=id_item-]').children().each(
        function (){
            if($(this).val() == 0){
                $(this).css('backgroundColor','white');
            }
            if($(this).val() == 1){
                $(this).css('backgroundColor','green');
            }
            if($(this).val() == 2){
                $(this).css('backgroundColor','red');
            }
            if($(this).val() == 3){
                $(this).css('backgroundColor','orange');
            }
        }
    );

Which works fine.

I also want the select elements to have the same background colour as the selected option, which I am trying to achieve using the following:

$('select[id$=-status][id^=id_item-]').each(
        function (){
            $(this).css('backgroundColor',$('option:selected',this).css('backgroundColor'));
        }
    );

However, this just colours the select element in blue (I think it is taking the colour from the hover property rather than the background). This is in Firefox 3.6.8, which for the purposes of this question is the only browser concerned.

Any idea how to fix this?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Replace the "each" with "change"

$('select[id$=-status][id^=id_item-]').change(
    function (){
        var color = $('option:selected',this).css('background-color');
        $(this).css('background-color',color);
    }
).change();

This works in Chrome.

Also see: http://docs.djangoproject.com/en/dev/ref/contrib/admin/#modeladmin-media-definitions

Custom css in django admin is supported.

And I believe that the correct css attribute is: 'background-color'. backgroundColor is javascript and should be used like this: $(this).css({backgroundColor:color}); But it seems to work anyway so no biggie.

EDIT:

If you want to init the script on page load you can just add .change() behind. See code.

I also tested this in firefox and I also see this strange behavior (blue, wth blue?).

Another EDIT:

Ok, so here is a quick fix for 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();

Last EDIT:

You could even to this if you're using css:

<style>
    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;
    }
</style>

<script>    
    $('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();
</script>

Yet another edit:

I came across this and saw that I could make it shorter so I did just for fun:

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...