Question

如何使用json和mootools库填充select元素？

我的JSON数据如下：

var data  = {"tree":
                        [
                             {"id":1,"parent":0,"name":"Category A","subcategories":[]},
                             {"id":2,"parent":0,"name":"Category B","subcategories":
                                    [
                                        {"id":6,"parent":2,"name":"Subcategory F","subcategories":[]},
                                        {"id":7,"parent":2,"name":"Subcategory G","subcategories":[]}
                                    ]
                             },
                             {"id":3,"parent":0,"name":"Category C","subcategories":
                                    [
                                        {"id":8,"parent":3,"name":"Subcategory H","subcategories":[]}
                                    ]
                             },
                             {"id":4,"parent":0,"name":"Category D","subcategories":
                                    [
                                        {"id":9,"parent":4,"name":"Subcategory I","subcategories":
                                            [
                                                {"id":10,"parent":9,"name":"Subcategory J","subcategories":[]}
                                            ]
                                        }
                                    ]
                            },{"id":5,"parent":0,"name":"Category E","subcategories":[]}
                        ]
                };

如何获得此输出标记：

 <select>
       <option value="1">Category A</option>
       <option value="2">Category B</option>
       <option value="6">Category B->Subcategory F</option>
       <option value="7">Category B->Subcategory G</option>
       <option value="3">Category C</option>
       <option value="8">Category C->Subcategory H</option>
       <option value="4">Category D</option>
       <option value="9">Category D->Subcategory I</option>
       <option value="10">Category D->Subcategory I->Subcategory J</option>
       <option value="5">Category E</option>
    </select>

Answer 1

JSFiddle使用递归

代码：

var data  = {"tree":
                    [
                         {"id":1,"parent":0,"name":"Category A","subcategories":[]},
                         {"id":2,"parent":0,"name":"Category B","subcategories":
                                [
                                    {"id":6,"parent":2,"name":"Subcategory F","subcategories":[]},
                                    {"id":7,"parent":2,"name":"Subcategory G","subcategories":[]}
                                ]
                         },
                         {"id":3,"parent":0,"name":"Category C","subcategories":
                                [
                                    {"id":8,"parent":3,"name":"Subcategory H","subcategories":[]}
                                ]
                         },
                         {"id":4,"parent":0,"name":"Category D","subcategories":
                                [
                                    {"id":9,"parent":4,"name":"Subcategory I","subcategories":
                                        [
                                            {"id":10,"parent":9,"name":"Subcategory J","subcategories":[]}
                                        ]
                                    }
                                ]
                        },{"id":5,"parent":0,"name":"Category E","subcategories":[]}
                    ]
            };  
        //create the select element
        var select = new Element('select');

        //recurse function going on all the elements->sub-elements etc...
        function recurseData(arr,parent_name_prefix){
            if(!parent_name_prefix){parent_name_prefix = '';}
            arr.each(function(item){
                var name = item.name;
                var letter = name.split(' ')[1];
                var value = getABNumber(letter);

                var text = parent_name_prefix + name;
                addSelectOption(text,value);
                var arr_sub = item.subcategories;
                recurseData(arr_sub,text + ' -> ');
            });
        }

         //add option to select
        function addSelectOption(text,value){
            select.options[select.options.length] = new Option(text,value);
        }
        //function that get numner according to letter
        function getABNumber (val) {
          var base = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', i, j, result = 0;

          for (i = 0, j = val.length - 1; i < val.length; i += 1, j -= 1) {
            result += Math.pow(base.length, j) * (base.indexOf(val[i]) + 1);
          }

          return result;
        };

        //trigger all using the main arr
        recurseData(data.tree);

        //inject select to body
        select.inject(document.body);

json递归+选择元素

1 个答案: