mootools JSON 选择列表答案

【问题标题】：mootools JSON to select listmootools JSON 选择列表
【发布时间】：2013-03-18 22:14:53
【问题描述】：

我有一个 JSON 对象：

    var data = {"options" :[      
       {"name": "Size",  "value": "S", "price": "10", "order": "1"},
       {"name": "Size",  "value": "M", "price": "12", "order": "2"},
       {"name": "Size",  "value": "XL", "price": "14", "order":"3"},
       {"name": "Color", "value": "Red", "price": "14", "order":"2"},    
       {"name": "Color", "value": "Green", "price": "12", "order": "1"}
    ]}

如何使用 mootools javascript 库将其转换为选择列表？

<div>
 <label>Size:</label>
 <select name="options[size]">
   <option value="10">S</option>
   <option value="12">M</option>
   <option value="14">XL</option>
 </select>
 <label>Color:</label>
 <select name="options[color]">
   <option value="12">Green</option>
   <option value="14">Red</option>
 </select>
</div>

谢谢！

【问题讨论】：

标签： html json select mootools options

【解决方案1】：

它只是稍微处理一下数据 - 你去吧： http://jsfiddle.net/XRH6r/

var data = {"options" :[      
       {"name": "Size",  "value": "S", "price": "10", "order": "1"},
       {"name": "Size",  "value": "M", "price": "12", "order": "2"},
       {"name": "Size",  "value": "XL", "price": "14", "order":"3"},
       {"name": "Color", "value": "Red", "price": "14", "order":"2"},    
       {"name": "Color", "value": "Green", "price": "12", "order": "1"}
    ]};

//create unique map according to the data:
var arr = data.options;
var map = {};
arr.each(function(item){
    var name = item.name;
    var o;
    if(map[name]){
       o = map[name];      
    }
    else{
        o = {};
        o.options = [];
        map[name] = o;
    }
  o.options.push({value:item.value,price:item.price,order:Number(item.order)});
});

//sort options array to be ordered by order
//and then build the select
Object.each(map,function(item,name){
    item.options.sort(function(a,b){
           return a.order > b.order;
    });
    var label = new Element('label').set('html',name);
    var combo = new Element('select');
    item.options.each(function(opt){
       combo.options[combo.options.length] = new Option(opt.value,opt.price);     
    });

    label.inject(document.body);
    combo.inject(document.body);
});

【讨论】：