-2

我有一个这样的json数据：

 var data = [
        {ID:"1", Name: "a", ParentID: 0},
        {ID:"2", Name: "b", ParentID: 0},
        {ID:"3", Name: "c", ParentID: 0},
        {ID:"4", Name: "aa", ParentID: 1},
        {ID:"5", Name: "aaa", ParentID: 1},
        {ID:"6", Name: "bb", ParentID: 2},
        {ID:"7", Name: "cc", ParentID: 3},
        {ID:"8", Name: "bbb", ParentID: 2},
        {ID:"9", Name: "ccc", ParentID: 3},
        {ID:"10", Name: "bbbb", ParentID: 2},
        {ID:"11", Name: "cccc", ParentID: 3}
    ]

我想使用 Javascript Jquery 生成下拉列表。注意：数据排序基于 parentID 例如：ID = ParentID

  {ID:"1", Name: "a", ParentID: 0},
        {ID:"4", Name: "aa", ParentID: 1},
        {ID:"5", Name: "aaa", ParentID: 1}

我期望结果是这样的：

<select>
    <option value="1">a</option>
    <option value="4">aa</option>
    <option value="5">aaa</option>
    <option value="2">b</option>
    <option value="6">bb</option>
    <option value="8">bbb</option>
    <option value="10">bbbb</option>
    <option value="3">c</option>
    <option value="7">cc</option>
    <option value="9">ccc</option>
    <option value="11">cccc</option>
</select>

我能怎么做？

谢谢大家，

4

4 回答 4

2

使用 json 数组表示法，例如

var data = [
    {ID:"1", Name: "a", ParentID: 0},
    {ID:"2", Name: "b", ParentID: 0}
];

如果你使用 jQuery...

if(data.length){
    var elem = $('<select>');
    $.each(data, function(key,value){
       elem.append($("<option></option>")
         .attr("value",value.ID)
         .text(value.Name));
    });

   $('body').append(elem);
}
于 2013-07-10T10:53:28.260 回答
1

来，试试这个。只需将 data 设为数组并删除尾随逗号：

var data = [
        {ID:"1", Name: "a", ParentID: 0},
        {ID:"2", Name: "b", ParentID: 0},
        {ID:"3", Name: "c", ParentID: 0},
        {ID:"4", Name: "aa", ParentID: 1},
        {ID:"5", Name: "aaa", ParentID: 1},
        {ID:"6", Name: "bb", ParentID: 2},
        {ID:"7", Name: "cc", ParentID: 3},
        {ID:"8", Name: "bbb", ParentID: 2},
        {ID:"9", Name: "ccc", ParentID: 3},
        {ID:"10", Name: "bbbb", ParentID: 2},
        {ID:"11", Name: "cccc", ParentID: 3}
    ],
    selectHtml,
    optionArr = [];

optionArr.push('<select>');
for (var i = 0, il = data.length; i < il; i++) {
    optionArr.push('<option value="' + data[i].ID + '">' + data[i].Name + '</option>');
}
optionArr.push('</select>');
selectHtml = optionArr.join('');
console.log(selectHtml);
于 2013-07-10T11:01:15.147 回答
0

您也可以使用 jQuery 模板。

先决条件

jquery.tmpl.min.js。从这里下载

HTML

<select id="selectmenu"></select>

模板

准备要重复的模板。它的工作方式类似于项目模板。

<script id="optionTemplate" type="text/x-jquery-tmpl">
     <option value='${ID}'>${Name}</option>
</script>

你准备的Javascript 数据是错误的。你需要在数组对象中。

var data = 
 [{ID:"1", Name: "a", ParentID: 0},
 {ID:"2", Name: "b", ParentID: 0},
 {ID:"3", Name: "c", ParentID: 0},
 {ID:"4", Name: "aa", ParentID: 1},
 {ID:"5", Name: "aaa", ParentID: 1},
 {ID:"6", Name: "bb", ParentID: 2},
 {ID:"7", Name: "cc", ParentID: 3},
 {ID:"8", Name: "bbb", ParentID: 2},
 {ID:"9", Name: "ccc", ParentID: 3},
 {ID:"10", Name: "bbbb", ParentID: 2},
 {ID:"11", Name: "cccc", ParentID: 3}];

jQuery 要从模板和数据创建列表，您需要使用 tmpl() 方法。

$('#optionTemplate').tmpl(data).appendTo('#selectmenu');

解释

optionTemplate : 项目模板的名称

selectmenu : 是选择 HTML 控件的 ID

数据：是 javascript 数组

输出

在此处输入图像描述

查看小提琴演示

欢迎查询！

于 2013-07-10T13:38:05.913 回答
0

使您的数据成为对象数组：

var data = [
    {ID:"1", Name: "a", ParentID: 0},
    {ID:"2", Name: "b", ParentID: 0}, ...
];

根据 ParentID 对数据进行排序：0、1、1、0、2、2、2、0、3、3、3

var sorted = [];
for(var i = 0; i < 4; i ++) {
  sorted[i] = data.filter(function(datum) {
    return datum.ParentID === i;
  });
}
//each sorted[index] contains an array having same ParentIDs
var zeroes = sorted.splice(0, 1)[0]; //remove the first array which contains objects with ParentID === 0

在您的标记中有一个空的选择元素：

<select id="data"></select>

从每个数据元素创建一个option并将其附加到select.

zeroes.forEach(function(z, index) { //iterate over objects with ParentID === 0
    addOption(z);
    sorted[index].forEach(function(datum) { //iterate over non-zero ParentIDs
        addOption(datum);
    });
});

function addOption(obj) {
    var option = $('<option></option>').attr('value', obj.ID).text(obj.Name);
    $('#data').append(option);
}

更新了 JSFiddle

于 2013-07-10T11:02:50.780 回答