通过 javascript 更改特定 select2 的背景颜色

Question

在 Web 表单中，我在两个面板上分别使用了两个 select2 控件。

我希望在通过 javascript 达到特定条件时仅更改 select2 的一种背景颜色，否则它将保持其原始颜色。

我怎样才能做到这一点？

我正处于我发现下面的 css 代码能够将 select2 修改为我想要的结果的阶段。

       .select2-container .select2-selection{
        background: yellow;
        }

非常感谢任何帮助。

已编辑：

添加我的部分代码：

CSS

    .select2-container {
        position: relative;
        z-index: 2;
        float: left;
        margin-bottom: 0;
        display: table;
        table-layout: fixed;
        font-size: smaller;
    }

标记

<div class="container-fluid">
    <div class="col-md-7">
        <table>
           <tr>
                 <td>
                     <select id="ddl_Select2ONE" runat="server" class="form-control select"></select>
                 </td>
           </tr>
        </table>
    </div>
    <div class="col-md-5">
        <table>
           <tr>
                 <td>
                     <select id="ddl_Select2TWO" runat="server" class="form-control select"></select>
                 </td>
           </tr>
        </table>
    </div>
</div>

Javascript

pageLoad(){
  configureSelect2()
}

configureSelect2(){
    if(hf_value.value == "1"){
        //Change only ddl_Select2ONE to yellow background
    }
    else{
        //Change only ddl_Select2ONE to original background
    }
}

然后我将在 javascript 的页面加载检查条件启用的隐藏字段值时执行一些检查。

Answer 1

您可以使用：

document.getElementById('idOfElement').classList.add('select2-container')`;

或使用jquery:

$("#idOfElement").addClass("select2-container");
$("#idOfElement").addClass("select2-selection");

Answer 2

好的，您的 javascript 应该看起来像这样：

document.querySelector('#ddl_Select2ONE').style.background = "Yellow";

在你的 else 子句中：

document.querySelector('#ddl_Select2TWO').style.background = "Yellow";

Answer 3

试试这个

function declaration syntax was wrong.

use with classList function

//add in your js

        function pageLoad() {
          configureSelect2()
        }

        function configureSelect2() {
          if (hf_value.value == "1") {
        document.getElementById("ddl_Select2ONE").classList.add("yellow");
          } else {
           document.getElementById("ddl_Select2ONE").classList.remove("yellow");
          }
        }




 //add in your css
        .yellow{
        background-color:yellow !important;
        }

Answer 4

已解决，此处提供解决方案：

我需要的是 css class 中的“!important”，并找到我需要添加 css class 的跨度。

CSS

    .yellowBackground{
        background: yellow !important;
    }

javascript

function pageLoad(){
  configureSelect2()
}

function configureSelect2(){

        td_Name = document.getElementById("<%=td_Name.ClientID %>");
        if (hf_Value.value == "1") {
            ($(td_Name).find('span')).addClass('yellowBackground');
        }
        else {
            ($(td_Name).find('span')).removeClass('yellowBackground');
        }
}

希望对您有所帮助！

通过 javascript 更改特定 select2 的背景颜色

Changing background colour of specific select2 through javascript

javascript

select2