2

我有一个 JSON 值，它有多个用逗号分隔的值。有没有办法在 dom 中呈现它作为选择下拉输入？

这是我的标记的更详细视图。

HTML

 <h1>JSON Grid Edit</h1>

     <table cellpadding="0" cellspacing="0" border="0" class="dt display" id="json-table-edit" contenteditable="true" onKeyUp="editValue(this.id);">
      <thead>
        <tr>
          <th width="25%">Setting</th>
          <th width="75%">Value</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
      <tfoot>
        <tr>
          <th>Setting</th>
          <th>Value</th>
        </tr>
      </tfoot>
    </table>

JSON

     {
      "allconfig": {
         "card.inserted": {
         "value": "Inserted, Not Inserted",
     },
        "card.cisproc": {
        "value": "Processed",
      }
     }
    }

查询

$.getJSON('json/ione-edit.json', function (data) {
 var newJson = [];
 var myJson = data;
 $.each(myJson.allconfig, function (key, value) {
     var rowArray = [];
     rowArray.push(key);
     $.each(myJson.allconfig[key], function (key1, value1) {
         rowArray.push(value1);
     });
     newJson.push(rowArray);
 });
 $('#json-table-edit').dataTable({
     "bJQueryUI": true,
     "bStateSave": true,
     "sPaginationType": "full_numbers",
     "bProcessing": true,
     "oLanguage": {
         "sLengthMenu": ' <select>' + '<option value="10" selected="selected">Filter</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '<option value="-1">All</option>' + '</select>'
     },
     "aaData": newJson
 });
4

2 回答 2

2

这可以使用 split() 方法来实现。split(",") 将为每个逗号分隔的实体提供一个单独的字符串数组。然后，您可以使用 jQuery .each() 方法迭代数组并将每个字符串附加到包装在<option>标签中的 DOM。

像这样的东西：

 var data = {
  "allconfig": {
     "card.inserted": {
     "value": "Inserted, Not Inserted",
 },
    "card.cisproc": {
    "value": "Processed",
  }
 }
}

var options = (data.allconfig["card.inserted"]["value"]).split(",");

$("body").append("<select id='select'></select>");
//I am appending this to the body, but you can change body to
// whatever element/class/id you want 


$(options).each(function() {
  $("#select").append("<option>"+this+"</option>");
});
//I have also given the select an id so this code can be used on pages that have multiple select elements

这是一个小提琴

于 2013-04-02T03:10:03.423 回答
1

一种方法是使用普通的 Javascript 方法.split()。

您需要splitvalue 字符串，然后它将逗号分隔的字符串转换为数组。然后，您需要遍历数组以创建select下拉列表。

在你的 JSON 返回函数内部有这样的东西（不完全是这些变量名，只是一个向你展示这个想法的例子）：

$('#SelectContainer').html('<select name="mySelect">');
var options = value.split(',');
for (counter=0; counter < options.length; counter++)
{
    $('#SelectContainer').append('<option value="' + options[counter] + '">' + options[counter] + '</option>');
}
$('#SelectContainer').append('</select>');
于 2013-04-02T02:52:15.967 回答