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, Apr 25 '14 at 12:00
JSFiddle : http://jsfiddle.net/ramkumarmani/5aZXP/ - As of now the selectbox values are hard-coded...click red border to add row.... — Ramkumar Mani, May 09 '14 at 07: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, May 09 '14 at 07:21
I wanted to load the selectbox with values dynamically from json file using loadlist function...while adding a new row... — Ramkumar Mani, May 09 '14 at 07:50
check my added answer,, unable to access json file in fiddle, so i created a json and binded its options to select.. this should help you get going further with json file. — Dave, May 09 '14 at 08:06

score 0 · Accepted Answer · answered May 09 '14 at 08:03

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 09 '14 at 08:03

Dave

4,376
3
24
37

Hi Dave, IE 8 doesn't support .map() method...could u plz let me know the alternative to handle the .map() in IE8. – Ramkumar Mani May 12 '14 at 06:08
check here http://stackoverflow.com/questions/7350912/is-the-javascript-map-function-supported-in-ie8 and let me know – Dave May 12 '14 at 06:26
unfortunately i dont have windows machine .. can you check if this http://jsfiddle.net/5aZXP/3/ works in IE – Dave May 12 '14 at 06:32
jsfiddle doesn't have support for IE8 to verify your code in jsfiddle...IE9 it is working fine... – Ramkumar Mani May 12 '14 at 06:43
refer it here https://medium.com/tech-talk/e4f48c1771a This should work for you. – Dave May 12 '14 at 07:05
thanks for the reference...let me check and revert back to you...plz check out this URL...https://github.com/nicolasbize/magicsuggest/issues/11 – Ramkumar Mani May 12 '14 at 07:15
1

I have used $.map() instead of data.DATA.map()..and it is working fine..thanks for your support dave... – Ramkumar Mani May 12 '14 at 08:55
alright .. i had DATA as parent object in my sample JSON fiddle. – Dave May 12 '14 at 09:06

Add select box dynamically to the table td from json file

1 Answers1