-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

ほら、これ試してみて。データを配列にして、末尾のコンマを削除するだけです:

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 です。

data : 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 要素を含めます。

<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 に答える