javascript - 选择的插件：根据其值更改选项的背景

Question

为了简单的示例：我想更改下拉列表中每个选项的背景颜色。每个选项都应具有与其值相对应的背景颜色。

例如

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

});

链接到 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();
});

演示：http: //jsbin.com/otASETo/3