添加動態值到表頭下的下拉列表

我有一個兩個頭行的表。第一行顯示的標題的標題名稱，第二標題行顯示一些選項，諸如文本和選擇用於標題過濾像如下所示添加動態值到表頭下的下拉列表

<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

添加動態值到表頭下的下拉列表

回答

相關問題