Alex Man Alex Man - 2 months ago 10
HTML Question

Adding dynamic values to dropdown under table header

I have a table with two head rows. The first rows displays the header title name, the second header row display some option such as text and select for header filtering like as shown below

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>


script

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


By default on the select option will be empty, and I need to add options using jquery, i.e I have having values of Account Name in accountName objectand values of Account Type in accountType object. I need to populate accountName in select box under Account Name header and accountType in select box under Account Type header

Can anyone please tell me some solution for this

Answer

Assign unique ids to the select boxes and append to them differently

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

EDIT:

Sice your can't change the HTML structure, what can be done is that youfind the second and third th within the tr and then append options to them as

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

Comments