From JSON to HTML Select

From JSON to HTML Select

by Donavon Lerman

HTML

<div id="debug"><br /><br /><br /></div>
<br /><br />
<select size="4" multiple="multiple" name="searchIn" id="searchIn">

JavaScript

window.onload = function () {
  setOptions("searchIn");
};

var jsonObj = {};
jsonObj = {"group1":
               {"option1":"Option 1",
                "option2":"Option 2"},
           "group2":
               {"option3":"Option 3",
                "option5":"Option 5",
                "option7":"Option 7"}
          };

function setOptions(searchInID) {
    var theSelect = document.getElementById(searchInID);
    
    for (var key in jsonObj) {
        // set option groups
        var optionGroup   = document.createElement("optgroup");
        optionGroup.label = key;
        theSelect.options.add(optionGroup);
        
        for (var key1 in jsonObj[key]) {         
            // set options
            var option   = document.createElement("option");
            option.value = key1;
            option.text  = jsonObj[key][key1];
            theSelect.options.add(option);
        }
    }
}

document.getElementById('debug').innerHTML = JSON.stringify(jsonObj);