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

我有一个两个头行的表。第一行显示的标题的标题名称，第二标题行显示一些选项，诸如文本和选择用于标题过滤像如下所示添加动态值到表头下的下拉列表

<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，即我有价值帐户名称在帐户名称目标和值帐户类型在帐户类型对象。我需要填充帐户名在选择框下帐户名称头和ACCOUNTTYPE在选择框下帐户类型头

谁能告诉我，这

来源

2016-09-26 Alex Man

一些解决方案指定唯一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>

编辑：

SICE你不能改变的HTML结构，什么可以做的是，youfind的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>

来源

2016-09-26 09:52:32

感谢您的答复，问题是，我不能把任何ID为选择框，因为它是一个自动生成的HTML –

好了，还有一个问题你知道该HTML看起来像上面提到的一个，它不会改变 –

它不会改变，结构是正确的 –

是否会有一个只有两个dropd拥有你的表，那么这将解决你的问题

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

来源

2016-09-26 10:12:57

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

回答

相关问题