Question

我想使用jquery动态地将selectbox添加到表行。

我从“data.json”文件中获取selectbox值。

请在下面找到我的代码：

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>

Answer 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
          })
      );  
}

从json文件动态地向表td添加选择框

1 个答案: