jquery - 将动态值添加到表标题下的下拉列表中

Question

我有一张有两行头的 table 。第一行显示标题标题名称，第二行显示一些选项，例如文本并选择标题过滤，如下所示

<强> JSFiddle

<table id="testTable" border="1">
  <thead>
    <tr>
      <th>Account Id</th>
      <th>Account Name</th>
      <th>Account Type</th>
    </tr>
    <tr>
      <th> <input type="text"> </th>
      <th> 
        <select style="width: 100%;">
          <option></option>
        </select> </th>
      <th>
        <select style="width: 100%;">
          <option></option>
        </select>
      </th>
    </tr>
  </thead>
</table>

脚本

 $(document).ready(function() {
   accountName = { "1": "Account1", "2": "Account2" };
   accountType = { "1": "AccountType1", "2": "AccountType2" };
     $.each(accountName, function(key, value) {   
       $('select').append($("<option></option>")
                      .attr("value",key)
                      .text(value)); 
     });

     $.each(accountType, function(key, value) {   
       $('select').append($("<option></option>")
                      .attr("value",key)
                      .text(value)); 
     });
 });

默认情况下，选择选项将为空，我需要使用 jquery 添加选项，即我在 accountName 对象中具有 Account Name 值，并且值 <accountType 对象中的strong>帐户类型。我需要在帐户名称标题下的选择框中填充accountName，并在帐户类型标题下的选择框中填充accountType

谁能告诉我一些解决方案

Answer 1

为选择框分配唯一的 id 并以不同的方式附加到它们

$(document).ready(function() {
   accountName = { "1": "Account1", "2": "Account2" };
   accountType = { "1": "AccountType1", "2": "AccountType2" };
     $.each(accountName, function(key, value) {   
       $('#accountName').append($("<option></option>")
                      .attr("value",key)
                      .text(value)); 
     });

     $.each(accountType, function(key, value) {   
       $('#accountType').append($("<option></option>")
                      .attr("value",key)
                      .text(value)); 
     });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable" border="1">
  <thead>
    <tr>
      <th>Account Id</th>
      <th>Account Name</th>
      <th>Account Type</th>
    </tr>
    <tr>
      <th> <input type="text"> </th>
      <th> 
        <select style="width: 100%;" id="accountName">
          <option></option>
        </select> </th>
      <th>
        <select style="width: 100%;" id="accountType">
          <option></option>
        </select>
      </th>
    </tr>
  </thead>
</table>

编辑:

如果您无法更改 HTML 结构，可以做的就是在 tr 中找到第二个和第三个 th，然后将选项附加到它们

$('tr th:nth-child(2)').find('select').append($("<option></option>")

 $(document).ready(function() {
   accountName = { "1": "Account1", "2": "Account2" };
   accountType = { "1": "AccountType1", "2": "AccountType2" };
     $.each(accountName, function(key, value) {   
     
       $('tr th:nth-child(2)').find('select').append($("<option></option>")
                      .attr("value",key)
                      .text(value)); 
     });

     $.each(accountType, function(key, value) {   
       $('tr th:nth-child(3)').find('select').append($("<option></option>")
                      .attr("value",key)
                      .text(value)); 
     });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable" border="1">
  <thead>
    <tr>
      <th>Account Id</th>
      <th>Account Name</th>
      <th>Account Type</th>
    </tr>
    <tr>
      <th> <input type="text"> </th>
      <th> 
        <select style="width: 100%;" id="accountName">
          <option></option>
        </select> </th>
      <th>
        <select style="width: 100%;" id="accountType">
          <option></option>
        </select>
      </th>
    </tr>
  </thead>
</table>