Add select box dynamically to the table td from json file

Question

I wanted to add the selectbox to the table row dynamically using jquery.

I am getting the selectbox values from "data.json" file.

Please find my code below:

function loadlist(selobj, url) {
  $(selobj).empty();
  $.getJSON(url, {}, function (data) {
    $(selobj).append('<option value="0">--Select--</option>');
    $.each(data, function (i, obj) {
      $(selobj).append($('<option value=' + data[i].id + '>' + data[i].name + '</option>'));
    });
  });
}
$(function () {
  loadlist($('select#category_01').get(0), 'data.json');
  //slide Toggle
  $('.expandable-panel-heading').click(function () {
    $('.expandable-panel-content').slideToggle();
    $("#expanderSign").toggleClass("up down");
  });

  //creating row
  var $lastChar = 1, $newRow;
  $get_lastID = function () {
    var $id = $('#search-table tr:last-child td:first-child select').attr("id");
    $lastChar = parseInt($id.substr($id.length - 2), 10);
    $lastChar = $lastChar + 1;
    $newRow = "<tr> \
        <td><select id='category_0" + $lastChar + "' size='1'><option value='0'>--Select--</option></select></td> \ <td valign='top'><input type='text' id='tokenfield_0" + $lastChar + "' name='tokenfield_0" + $lastChar + "' maxlength='255' /></td> \ <td valign='top'><a class='signs addRow'>+</a></td> \
        </tr>"
    loadlist($('select#category_0' + $lastChar).get($lastChar), 'data.json', 'category_0' + $lastChar);
    return $newRow;
  }

  // Add Row
  $(document).on("click", ".addRow", function () {
    if ($lastChar <= 7) {
      $get_lastID();
      $('#search-table tbody').append($newRow);
    } else {
      alert("Only 8 Rows allowed!");
    }
    ;
  });
});

I wanted to call loadlist() while adding a row to create selectbox dynamically.

I will appreciate for any help.....

Please find my HTML Code below:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Agilent LSCA Search :: Paradigm</title>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery.tokeninput.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href="css/tokens.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div class="expandable-panel" id="cp-1">
<div class="expandable-panel-heading">
<h2><span id="expanderSign" class="arrow up"></span> Try Advance Application Finder       <span class="beta">(BETA)</span></h2>
</div>
<div class="expandable-panel-content">
<div class="content-container">
<table id="search-table" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><select name="category_01" id="category_01" size="1"></select></td>
<td valign="top"><input type="text" id="tokenfield_01" name="tokenfield_01" /></td>
<td valign="top"><a id="firstRow" class="signs addRow">+</a></td>
</tr>
</tbody>
</table>
</div>
<div class="take-action">
<span class="btn-link"><a href="javascript:void(0);">Clear Filters</a></span>
<span class="btn btn-blue"><strong class="blue">APPLY</strong></span>
</div>
</div>
</div>
</div>
</body>
</html>

can you updated question with HTML code you have written so far, or a jsfiddle — Dave
– Dave, Commented Apr 25, 2014 at 12:00
JSFiddle : jsfiddle.net/ramkumarmani/5aZXP - As of now the selectbox values are hard-coded...click red border to add row.... — Ramkumar Mani
– Ramkumar Mani, Commented May 9, 2014 at 7:16
i see select box getting added when u are adding new row,, further more what you want to accomplish on this, can you be more specific — Dave
– Dave, Commented May 9, 2014 at 7:21

Dave · Accepted Answer · 2014-05-09 08:03:53Z

0

Here is update code with json binding jsfiddle

var data = {"DATA":[{"COUNTRYCODE":"1","DESCRIPTION":"USA","COUNTRYID":"211"},{"COUNTRYCODE":"1","DESCRIPTION":"Canada","COUNTRYID":"37"},{"COUNTRYCODE":"1","DESCRIPTION":"Dominican Republic","COUNTRYID":"224"}]};
var tid="";

function bindOptions(){
      $("#"+tid).append(
          data.DATA.map(function (el, i) {
              return $('<option>')
                  .val(el.COUNTRYID)
                  .text(el.DESCRIPTION)
                  .data('DATA', el); // just in case you also want to access COUNTRYCODE
          })
      );  
}

answered May 9, 2014 at 8:03

Dave

4,4463 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Ramkumar Mani Over a year ago

Hi Dave, IE 8 doesn't support .map() method...could u plz let me know the alternative to handle the .map() in IE8.

Dave Over a year ago

check here stackoverflow.com/questions/7350912/… and let me know

Dave Over a year ago

unfortunately i dont have windows machine .. can you check if this jsfiddle.net/5aZXP/3 works in IE

Ramkumar Mani Over a year ago

jsfiddle doesn't have support for IE8 to verify your code in jsfiddle...IE9 it is working fine...

Ramkumar Mani Over a year ago

I have used $.map() instead of data.DATA.map()..and it is working fine..thanks for your support dave...

|

Collectives™ on Stack Overflow

Add select box dynamically to the table td from json file

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related