Javascript 所选插件：根据其值更改选项的背景

出于简单示例的考虑：我想更改下拉列表中每个选项的背景色。每个选项都应有与其值对应的背景色

例如

我已尝试选择。活动结果，但它就是不起作用

有什么想法吗

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

});

---

那么，您想设置元素的颜色吗？在创建它们并将它们添加到应用程序时尝试这样做

另外，您有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();
});

---

演示：

为什么要使用$document.getElementById'foo'？！你从哪里学来的？如果您有jQuery，请使用它：$'foo'。$select[0]将获得一个DOM元素。你为什么这么做？同样，您有jQuery，使用它：$select.append。。。；。对不起，我不是有意伤害你的jQuery感情的我刚刚做了很多jQuery，我想我也应该尝试学习一些原生js，并且只使用jQuery来处理一些蹩脚的东西，比如多个css属性。我不认为Selected会从原始元素复制每个属性，但事实就是如此，我应该尝试一下。相反，我尝试将样式直接应用于所选的生成元素，而没有任何运气。。。谢谢你的帮助@埃斯特拉：不客气，很高兴我能帮上忙。我不知道插件会复制样式，我只是试着看看会发生什么是的，我同意您应该知道如何使用本机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();
});