将选择框从 json 文件动态添加到表 td答案

【问题标题】：Add select box dynamically to the table td from json file将选择框从 json 文件动态添加到表 td
【发布时间】：2014-04-25 11:31:48
【问题描述】：

我想使用 jquery 将选择框动态添加到表格行中。

我正在从“data.json”文件中获取选择框值。

请在下面找到我的代码：

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!");
    }
    ;
  });
});

我想在添加行以动态创建选择框时调用loadlist()。

我会很感激任何帮助.....

请在下面找到我的 HTML 代码：

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

【问题讨论】：

你能用你目前编写的 HTML 代码或 jsfiddle 更新问题吗
希望我已经更新了 HTML 代码......
能不能加个jsfiddle
JSFiddle : jsfiddle.net/ramkumarmani/5aZXP - 到目前为止，选择框值是硬编码的...单击红色边框以添加行...。
我看到当你添加新行时选择框被添加了，还有更多你想要完成的，你能更具体一点

标签： javascript jquery json

【解决方案1】：

这里是带有 json 绑定 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
          })
      );  
}

【讨论】：

嗨，戴夫，IE 8 不支持 .map() 方法...请告诉我在 IE8 中处理 .map() 的替代方法。
在这里查看stackoverflow.com/questions/7350912/… 并告诉我
不幸的是我没有windows机器..你能检查一下这个jsfiddle.net/5aZXP/3是否在IE中工作
jsfiddle 不支持 IE8 来验证您在 jsfiddle 中的代码...IE9 工作正常...
我使用了 $.map() 而不是 data.DATA.map()..它工作正常..感谢您的支持，dave...