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

在web表单中，我在每个面板上使用两个select2控件

我只想改变select2的一个背景颜色，当它通过javascript达到特定条件时，否则它将保持原来的颜色

我怎样才能做到这一点

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

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

非常感谢您的帮助

编辑：

添加我的部分代码：

CSS

加价

---

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

您可以使用：

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

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

或使用jquery:

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

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

---

好的，您的javascript应该如下所示：

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

在你的else条款中：

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

试试这个

函数声明语法错误

与功能一起使用

---

此处解决和提供的解决方案：

我需要的是css类中的“！important”，并找到我需要添加css类的范围

CSS

javascript

函数pageLoad（）{
配置选择2（）
}
函数配置Select2（）{
td_Name=document.getElementById（“”）；
如果（hf_Value.Value==“1”）{
（$（td_Name）.find（'span'））.addClass（'yellowBackground'）；
}
否则{
（$（td_Name）.find（'span'））.removeClass（'yellowBackground'）；
}
}

---

希望这有帮助

如果CD已经在运行，也可以发布html代码，然后是$（'.select2 container.select2 selection'）.css（{backgroundColor:'yellow'}）@prasad我在我的问题中添加了一些代码重写我在我的问题中添加了html代码（只是重写我自己的代码，因为它是非常大的代码），不作为文档使用。querySelector（“#ddl_Select2ONE”）.style.background=“Yellow”；返回错误消息无法读取nulldocument.querySelector（“#ddl_Select2ONE”）的属性“style”。style.background=“黄色”适用于我的htmlNot working，因为即使我删除了该条件，颜色也不会更改。它不应该修改.select2容器。select2选择背景色而不是添加新类吗？但是你在问题中提到的只有

ddl_Select2ONE

背景色被更改了。@JamesYTL你能澄清更多的问题吗。修改select2容器。select2选择不是正确的方法。我已经发布了只改变一个select2背景颜色的方法。你是说添加我在问题中写的cssClass？如果我在css脚本上写的话，它会先运行脚本，在任何条件检查发生之前，它会使我所有的select2变为黄色

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

//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;
        }

    .yellowBackground{
        background: yellow !important;
    }

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