Adding dynamic values to dropdown under table header

Question

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

Shubham Khatri · Accepted Answer · 2016-09-26 10:07:22Z

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>

Thanks for the reply, the issue is that I cant put any id for the select box, since its a auto generated html
Okay, just one more question do you know that the html looks like the above mentioned one and it doesn't change

Sumit Kumar · Accepted Answer · 2016-09-26 10:12:57Z

IF there will be an only two dropdowns in your table then this will solved your problem

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

Collectives™ on Stack Overflow

Adding dynamic values to dropdown under table header

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related