Выбранный плагин: измените фон опций в зависимости от его значения

Question

Для простого примера: я хотел бы изменить цвет фона для каждого параметра в раскрывающемся списке. Каждый параметр должен иметь цвет фона, соответствующий его значению.

E.g.

$('...').css('background', 'red') 

Я попытался выбрать .active-result, но он просто не сработает.

Любые идеи?

$(function() { 

    var $select = $(document.getElementById('foo')), 
     colors = ['red', 'yellow', 'green', 'purple', 'silver'] 
    ; 

    for(var i = 0; i < 5; i++) { 
    $select[0].add(new Option('Color: ' + colors[i], colors[i])); 
    } 

    $select[0].options[2].selected = true; 

    $select.chosen(); 

}); 

Link to jsbin

Answer 1

Итак, вы хотите, чтобы установить цвет элементов? Попробуйте сделать это, когда вы их создаете, и добавьте их в <select>.

Кроме того, у вас есть jQuery, используйте его! Не используйте неправильную настройку jQuery и собственных методов DOM.

$(function(){ 
    var $select = $('#foo'), // Don't use getElementById 
     colors = ['red', 'yellow', 'green', 'purple', 'silver']; 

    for(var i = 0, len = colors.length; i < len; i++){ // Don't hard-code the length 
     var $option = $('<option></option>', { // jQuery can create elements 
      text: 'Color: ' + colors[i], 
      value: colors[i] 
     }).css('background-color', colors[i]); // set the color 

     $select.append($option); // Append the element using jQuery 
    } 

    $select.val(colors[2]); // jQuery can also set the "selected" option 

    $select.chosen(); 
}); 

DEMO: http://jsbin.com/otASETo/3