生成dropdowlist數據JSON

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

讓您的數據對象的數組：基於PARENTID

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

排序數據：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); 
} 

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的

的陣列

輸出

退房fiddle demo

查詢歡迎！