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

【问题标题】：How do I change the colour of all select2 elements in a specific row如何更改特定行中所有 select2 元素的颜色
【发布时间】：2017-08-14 18:35:48
【问题描述】：

我正在使用 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。

【问题讨论】：

标签： jquery css jquery-select2

【解决方案1】：

您的问题在这一行：

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

.data("select2") 仅返回第一个值，而不是要更改背景颜色的元素数组。

您可以使用.each() 来迭代每个选择标签。

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

sn-p：

$('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>

【讨论】：

是的，但我不想更改下拉菜单的颜色，只是容器很好，但问题是使一行中的所有容器都具有背景颜色。即使在您提供的代码中，查看带有选项（论文、项目、研究）的选择，对那个没有影响
是的，没错。但不是通过 ids 或任何东西。例如，如果我将所有 tr 输入字段的颜色设置为红色，则该行中的所有文本字段都将具有红色，但是对于这些选择元素，我想影响整行中的所有元素，而不是只有一个
@Muhammad 回答和 sn-p 已更新。让我知道。谢谢

【解决方案2】：

你在这个例子中使用了什么库...... 我不太明白

也许这个例子可以试试

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

<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

【讨论】：