Question

我有这样的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>

我该怎么办？

全心全意，

Answer 1

使用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);
}

Answer 2

在这里试试这个。只需将数据设为数组并删除尾随逗号：

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

Answer 3

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

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元素：

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

<强> Updated JSFiddle

Answer 4

你也可以做jQuery模板。

<强>先决条件

jquery.tmpl.min.js。从here下载

<强> 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数组

<强>输出

enter image description here

查看fiddle demo

欢迎查询！

使用数据json生成下拉列表

4 个答案: