From HTML Select to JSON

From HTML Select to JSON

by Donavon Lerman

HTML

<div id="debug"><br /><br /><br /></div>
<br /><br />
<select id="select1">
    <optgroup label="group1">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </optgroup>
    <optgroup label="group2">
        <option value="option3">Option 3</option>
        <option value="option5">Option 5</option>
        <option value="option7">Option 7</option>
    </optgroup>
</select>

JavaScript

var jsonObj = {};

var select   = document.getElementById('select1');
var optGroup = select.getElementsByTagName('optgroup');

for(var i=0;i<optGroup.length;i++) {
    jsonObj[optGroup[i].label]  = {};
    var options                 = optGroup[i].getElementsByTagName('option');
    
    for(var j=0;j<options.length;j++) {
        jsonObj[optGroup[i].label][options[j].value] = options[j].text;
    }
    
}

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