Question

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

<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添加选项，即 accountName 对象中的帐户名值和< accountType 对象中的strong>帐户类型。我需要在帐户名称标题下的选项框中填写帐户名，并在帐户类型标题<下方的选择框中填充帐户类型 / p>

任何人都可以告诉我一些解决方案吗

Answer 1

将唯一ids分配给选择框并以不同方式附加

$(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结构，可以做的是找到th中的第二个和第三个tr，然后将选项附加到

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

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

<!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>

将动态值添加到表头下的下拉列表中

2 个答案: