选择的插件：根据其值更改选项的背景答案

【问题标题】：Chosen plugin: Change the background of options depending on its value选择的插件：根据其值更改选项的背景
【发布时间】：2013-09-04 14:52:18
【问题描述】：

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

例如

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

【问题讨论】：

你为什么要$(document.getElementById('foo'))？！你从哪里学来的？你有 jQuery，使用它：$('#foo').
$select[0] 将获得一个 DOM 元素。你为什么这样做？同样，你有 jQuery，使用它：$select.append(...);.

标签： javascript jquery

【解决方案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

【讨论】：

对不起，我不是故意伤害你对 jQuery 的感情。 :) 我刚刚做了这么多 jQuery，我想我也会尝试学习一些原生 js，并且只是将 jQuery 用于诸如多个 css 属性之类的蹩脚的东西。我不认为 Chosen 会复制原始元素的每个属性，但事实就是如此，我应该尝试一下。相反，我尝试将样式直接应用于所选生成的元素，但没有任何运气......谢谢您的帮助！
@estrar：不客气，很高兴我能帮上忙。我不知道插件会复制样式，我只是试了一下看看会发生什么。 :-) 是的，我同意你应该知道如何使用本地 DOM 方法，但在这种情况下，让我们保持简单。阅读混合样式的代码会令人困惑。