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

您的问题在这一行：

$('#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)");
});

摘录：

$('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 () {
	$("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

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

2 个答案: