将动态值添加到 table header 下的下拉列表

Question

我有一个 table 有两个头行。第一行显示 header 标题名称，第二行 header 显示一些选项，例如文本和 select 用于 header 过滤，如下所示

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

默认情况下 select 选项为空，我需要使用 jquery 添加选项，即我的值为 Account Name在 accountName object 和 AccountType 的值在 accountType object 中。我需要在 Account Name header 和 accountType[=35 下的 select 框中填充 accountName =] 在 帐户类型 下的 select 框中 header

谁能告诉我一些解决方案

Answer 1

将唯一的 ids 分配给 select 框并以不同方式附加到它们

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

Answer 2

如果您的 table 中只有两个下拉菜单，那么这将解决您的问题

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function() {
   var accountName = [{"value":"1", "text":"Account1"},{"value": "2", "text":"Account2" }];
   var accountType = [{"value": "1","text":"AccountType1"},{"value": "2","text": "AccountType2" }];
     $.each(accountName, function(key, value) {   
       $('table select:first').append($("<option></option>")
                      .attr("value",value.value)
                      .text(value.text)); 
     });

     $.each(accountType, function(key, value) {   
       $('table select:last').append($("<option></option>")
                      .attr("value",value.value)
                      .text(value.text)); 
     });
 });
</script>
</head>
<body>
<div>
<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>
</div>
</body>
</html>

将动态值添加到 table header 下的下拉列表

Adding dynamic values to dropdown under table header

html

jquery

html-table

drop-down-menu

dropdown