Javascript 使用json数据生成dropdowlist

我有一个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生成dropdownlist。 注意：基于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>

A.
aa
aaa
B
bb
bbb
bbbb
C
复写的副本
ccc
中交

我该怎么办

---

谢谢大家，

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

if（data.length）{
变量元素=$（''）；
$。每个（数据、函数（键、值）{
元素追加（$（“”）
.attr（“value”，value.ID）
.text（value.Name））；
});
$（'body'）。追加（elem）；
}

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

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

var数据=[
{ID:“1”，Name:“a”，ParentID:0}，
{ID:“2”，名称：“b”，父ID:0}，
{ID:“3”，名称：“c”，父ID:0}，
{ID:“4”，姓名：“aa”，父ID:1}，
{ID:“5”，名称：“aaa”，父ID:1}，
{ID:“6”，姓名：“bb”，父ID:2}，
{ID:“7”，姓名：“cc”，父ID:3}，
{ID:“8”，姓名：“bbb”，父ID:2}，
{ID:“9”，姓名：“ccc”，父ID:3}，
{ID:“10”，姓名：“bbbb”，父ID:2}，
{ID:“11”，姓名：“cccc”，父ID:3}
],
选择HTML，
optionArr=[]；
选项自动推送（“”）；
对于（var i=0，il=data.length；i

将数据设置为对象数组：

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

根据ParentID对数据排序：0、1、1、0、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

---

您也可以使用jQuery模板来完成

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

先决条件

jquery.tmpl.min.js。下载自

HTML

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

jQuery 要从模板和数据创建列表，需要使用tmpl（）方法

解释

optionTemplate:项目模板的名称

selectmenu：是select HTML控件的ID

数据：是javascript的数组

输出

退房

---

欢迎查询

只需循环直到在数据数组中有值，并为在数据数组中找到的每个值创建选项标记。您将在控制台中得到一个错误，如

Uncaught SyntaxError:Unexpected token{

，用于您的数据对象！请检查它是否正确。感谢您的想法，但我希望根据parentID对数据库进行排序。它如下：{ID:“1”，名称：“a”，ParentID:0}，{ID:“4”，名称：“aa”，ParentID:1}，{ID:“5”，名称：“bca”，ParentID:1}，{ID:“2”，名称：“b”，ParentID:0}，{ID:“6”，名称：“bb”，ParentID:2}，{ID:“aab”，ParentID:2}，{ID:“10”，名称：“BBBBBBBB”，ParentID:2}@carole请检查更新版本。我想这是您想要的。

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

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

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

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