जेसन

Question

से ऑप्टग्रुप के साथ एचटीएमएल का चयन करें मेरे पास एक JSON स्ट्रिंग है (php json_encode से) जो दिखता है;

var json = [{"Foo":[{"id":1,"name":"aaa"},{"id":2,"name":"bbb"}]},{"Bar":[{"id":3,"name":"ccc"},{"id":4,"name":"ddd"}]}]; 

मैं फॉर्म में जावास्क्रिप्ट/jQuery का उपयोग करके एक HTML चयन बनाने में सक्षम होना चाहता हूं;

<select> 
    <optgroup label="Foo"> 
     <option value="1">aaa</option> 
     <option value="2">bbb</option> 
    </optgroup> 
    <optgroup label="Bar"> 
     <option value="3">ccc</option> 
     <option value="4">ddd</option> 
    </optgroup> 
</select> 

json प्रसंस्करण के संदर्भ में मैं this far मिल (जहाँ तक मुझे पता नहीं), लेकिन jsFiddle इसे चलाने के लिए विफल रहता है और अपने ब्राउज़र जमा।

var json = [{"Foo":[{"id":1,"name":"aaa"},{"id":2,"name":"bbb"}]},{"Bar":[{"id":3,"name":"ccc"},{"id":4,"name":"ddd"}]}]; 

$.each(json, function(i,group) { 
    console.log(i); 
    $.each(group, function(j, option) { 
        console.log(j, option); 
        $.each(option, function(k, item) { 
            console.log(k, item); 
        }); 
    }); 
});​ 

Answer 1

यह ठीक ठीक चलना चाहिए।

var $select = $("<select>"); 
$select.appendTo("#somewhere"); 

$.each(json, function(i, optgroups) { 
    $.each(optgroups, function(groupName, options) { 
     var $optgroup = $("<optgroup>", {label: groupName}); 
     $optgroup.appendTo($select); 

     $.each(options, function(j, option) { 
      var $option = $("<option>", {text: option.name, value: option.id}); 
      $option.appendTo($optgroup); 
     }); 
    }); 
});