通过javascript

Question

在网络表单中，我在两个面板上使用两个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

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

我需要的是＆＃34;！important＆＃34;在css类中找到span我需要将css类添加到。

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

希望这有帮助！

Answer 3

好的，你的javascript应该是这样的：

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

在你的else子句中：

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

Answer 4

试试这个

  

  
1. 函数声明语法错误。
  
2. 与classList功能
一起使用   

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