Установите цвет фона для выбранного варианта в JQuery

Ответ 1

Заменить "каждый" на "изменение"

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

Пользовательский css в администраторе django поддерживается.

И я считаю, что правильный атрибут css: 'background-color'. backgroundColor является javascript и должен использоваться следующим образом: $(this).css({backgroundColor:color}); Но, похоже, все равно работает, поэтому ничего не стоит.

EDIT:

Если вы хотите запустить загрузку script на странице, вы можете просто добавить .change(). См. Код.

Я также тестировал это в firefox, и я также вижу это странное поведение (синий, синий синий?).

Другой EDIT:

Хорошо, так вот быстрое исправление для 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();

Последний EDIT:

Вы можете даже это сделать, если используете 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>

Еще одно редактирование:

Я наткнулся на это и увидел, что я мог бы сделать его короче, поэтому я просто ради удовольствия:

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

Ответ 2

$("select[id$=-status][id^=id_item-]").change(function (){
    var style = $(this).find('option:selected').attr('style');
    $(this).attr('style', style);
    $("select[id$=-status][id^=id_item-] option:selected").each(function () {
            $(this).attr('style', style);
          });
}).trigger('change');

Добавьте стиль к вам HTML-код, используйте триггер, не забудьте загрузить его в свой $(document).ready(function(){} Также не забудьте поместить этот код после заполнения вашего окна выбора из DB

Ответ 3

Мне нравится @Arnar Yngvason, но я добавлю это в микс. Это решение использует классы CSS, поэтому стили можно легко изменить без нарушения остальной части кода.

Html

<select>
    <option class="Red">Red</option>
    <option class="Blue">Blue</option>
    <option class="Green">Green</option>
    <option class="Yellow">Yellow</option>
</select>
<div id="output"></div>

CSS

.Red{background-color:#ff0000;}
.Blue{background-color:#0000ff;}
.Green{background-color:#00ff00;}
.Yellow{background-color:#ffff00;}

JavaScript

$("select").change(function(){
    $(this).removeClass($(this).attr('class'))
           .addClass($(":selected",this).attr('class')); 
    /*If you want to keep some classes just add them back here*/
    //Optional: $(this).addClass("Classes that should always be on the select");

});

 $("select").change(function() {
   $(this).removeClass($(this).attr('class'))
     .addClass($(":selected", this).attr('class'));
   /*If you want to keep some classes just add them back here*/
   //Optional: $(this).addClass("Classes that should always be on the select");

 });

    .Red {
      background-color: #ff0000;
    }
    .Blue {
      background-color: #0000ff;
    }
    .Green {
      background-color: #00ff00;
    }
    .Yellow {
      background-color: #ffff00;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option class="Red">Red</option>
  <option class="Blue">Blue</option>
  <option class="Green">Green</option>
  <option class="Yellow">Yellow</option>
</select>
<div id="output"></div>