如何使用javascript更改背景颜色选择2？答案

【问题标题】：How to change background color select 2 using javascript?如何使用javascript更改背景颜色选择2？
【发布时间】：2016-05-23 09:39:57
【问题描述】：

演示和我的代码是这样的：http://jsfiddle.net/fc1qevem/10/

我的javascript代码是这样的：

var select02 = $('#select02');

$(select02).select2({
    data: [{
        id: 0,
        text: "test01"
    }, {
        id: 1,
        text: "test02"
    }, {
        id: 2,
        text: "test03"
    }, {
        id: 3,
        text: "test04"
    }, {
        id: 4,
        text: "test05"
    }],
     placeholder: "Branch name",
});

我想把select2的背景颜色改成蓝色

我想使用 javascript 更改背景颜色

能不能做到？

谢谢

【问题讨论】：

.select2-search 输入{ background-color: blue;在你的 CSS 中试试这个
@Karthikeyan，如果css可以放在javascript中？
$('.select2-selection').css('background-color', 'blue'); @moses t 你可以试试这个。

标签： javascript jquery html css jquery-select2

【解决方案1】：

在你的 CSS 中添加这个

.select2-selection{
  background-color:blue !important;
}

js 解决方案

 $(select02).select2({
    data: [{
        id: 0,
        text: "test01"
    }, {
        id: 1,
        text: "test02"
    }, {
        id: 2,
        text: "test03"
    }, {
        id: 3,
        text: "test04"
    }, {
        id: 4,
        text: "test05"
    }],
     placeholder: "Branch name",
}).data("select2").$container.find(".select2-selection").css('background-color', 'blue');

【讨论】：

如果css可以放在javascript中？
谢谢。我以为这很容易找到，但显然不是。

【解决方案2】：

如果您将使用 JavaScript 更改背景颜色，请尝试以下操作：

$('.select2-selection').css('background-color', 'blue');

【讨论】：

【解决方案3】：

// Css code
.bg_color {
     background-color: blue !important;
}

// Javascript code
// just put this code under the load function

$(select02).select2({ containerCssClass: "bg_color " });

这是 select2 如何将类添加到容器或 select2 的默认 css ".select2-container--default .select2-selection--single"，您可以在其中编辑容器的背景颜色。希望对你有帮助。

【讨论】：

【解决方案4】：

试试下面的代码：-

document.getElementById("select02").style.backgroundColor="blue";

【讨论】：