mootools JSON для выбора списка

У меня есть объект 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"}
    ]}

Как я могу преобразовать это в список выбора, используя библиотеку javascript mootools?

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

Спасибо!


json html options select mootools
person XTRUST.ORG    schedule 28.03.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это просто небольшая игра с данными — вот: 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);
});
person Adidi    schedule 28.03.2013