如何更改特定行中所有select2元素的颜色

Question

我正在使用select2，但我想更改表格中所有选择元素的背景颜色。但是，我正在运行的jQuery代码只会改变第一个选择输入的颜色。任何提示解决这个问题？

我的HTML看起来像

<table width="100%" class="table table-striped table-bordered table-hover" id="TB2"> 
    <thead> 
     <tr> 
     <th>Name</th> 
     <th>Type of Student</th> 
     <th>Thesis/ Project/ Research</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="table_row"> 
     <td><input class="form-control alert-danger" type="text" name="a"/></td> 
     <td><select class="form-control alert-danger""> 
      <option value="">Type</option> 
      <option>Bachelors</option> 
      <option>Masters</option> 
      <option>Doctoral</option> 
      <option>Postdoctoral</option> 
      </select></td> 
      <td><select class="form-control"> 
       <option value="">Select</option> 
       <option>Thesis</option> 
       <option>Project</option> 
       <option>Research</option> 
       </select></td> 
     </tr> 
    </tbody> 
</table> 

我的jQuery代码看起来像：

$(document).ready(function() { 
    $('select').select2({ 
     placeholder: "Select", 
     allowClear: true 
    }); 
    $('#TB2 tbody tr').find("select").data("select2").$container.find('.select2-selection').css("background-color", "rgb(10,10,10)"); 
}); 

jQuery的成功使第一个SELECT语句有适当的背景，但不影响第二。我需要使整行中的所有选择元素都具有RGB背景（10,10,10）。我的页面其他部分也有其他选择输入，我不想影响背景，所以我只需要影响tr。

Answer 1

您的问题e为在这条线：

$('#TB2 tbody tr').find("select").data("select2")....... 

的.data("select2")只返回第一个值，而不是为了要改变背景颜色元件的阵列。

您可以使用​​3210迭代每个选择标记。

$('#TB2 tbody tr').find("select").each(function(idx, ele) { 
    $(ele).data("select2").$container.find('.select2-selection') 
        .css("background-color", "rgb(10,10,10)"); 
}); 

的片段：

$('select').select2({ 
 
    placeholder: "Select", 
 
    allowClear: true 
 
}); 
 
$('#TB2 tbody tr').find("select").each(function(idx, ele) { 
 
    $(ele).data("select2").$container.find('.select2-selection') 
 
      .css("background-color", "rgb(10,10,10)"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 

 

 
<table width="100%" class="table table-striped table-bordered table-hover" id="TB2"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Type of Student</th> 
 
     <th>Thesis/ Project/ Research</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="table_row"> 
 
     <td><input class="form-control alert-danger" type="text" name="a"/></td> 
 
     <td><select class="form-control alert-danger""> 
 
      <option value="">Type</option> 
 
      <option>Bachelors</option> 
 
      <option>Masters</option> 
 
      <option>Doctoral</option> 
 
      <option>Postdoctoral</option> 
 
      </select></td> 
 
     <td><select class="form-control"> 
 
      <option value="">Select</option> 
 
      <option>Thesis</option> 
 
      <option>Project</option> 
 
      <option>Research</option> 
 
     </select></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

什么库，你用这个例子... 我完全不明白

也许这个例子可以尝试

$(function() { 
 
\t $("select").change(function() { 
 
\t \t var $this = $(this).val(); 
 
\t \t \t if ($this =="Bachelors") { 
 
\t \t \t \t alert('value = Bachelors'); 
 
     //more function here 
 
     $('body').css({'background':'red'}); // example 
 
     
 
     
 
\t \t \t } 
 
\t \t \t if ($this =="Masters") { 
 
\t \t \t \t alert('value = Bachelors'); 
 
     //more function here 
 
     $('body').css({'background':'blue'}); // example 
 
     
 
     
 
\t \t \t } 
 
     //etc... 
 
     
 
     
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table width="100%" class="table table-striped table-bordered table-hover" id="TB2"> 
 
    <thead> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>Type of Student</th> 
 
     <th>Thesis/ Project/ Research</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="table_row"> 
 
     <td><input class="form-control alert-danger" type="text" name="a"/></td> 
 
     <td><select class="form-control alert-danger"> 
 
      <option disabled value="">Type</option> 
 
      <option>Bachelors</option> 
 
      <option>Masters</option> 
 
      <option>Doctoral</option> 
 
      <option>Postdoctoral</option> 
 
      </select></td> 
 
      <td> 
 
      <select class="form-control"> 
 
       <option disabled value="">Select</option> 
 
       <option>Thesis</option> 
 
       <option>Project</option> 
 
       <option>Research</option> 
 
      </select> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

FIIDLE