如何使用JavaScript更改背景顏色選擇2？

Question

演示和我的代碼是這樣的： 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更改背景顏色

是否可以做到？

謝謝

Answer 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');

Answer 2

當您使用JavaScript更改背景顏色時，請嘗試以下操作：

$（'。select2-selection'）。css（'background-color'，'blue'）;

Answer 3

嘗試以下代碼：-

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

Answer 4

// 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”的方式，您可以在其中編輯容器的背景色。 希望對您有幫助。