Setting the opt group property dynamically to Select

Question

I am adding new options to a select menu by the following way:

var options1 = {
    val1 : 'text1',
    val2 : 'text2'
};
$.each(options1, function(val, text) {
    $('#SelectMenu').append( new Option(text,val) );
});

How can we add a opt group to the select menu?

Answer 1

Working Example: http://jsfiddle.net/rULKH/28/

JS

var groups = {
    1 : 'USPS',
    2 : 'FedEx'
};

var optionsGroup1 = {
    standard  : 'Standard: 7 day',
    rush      : 'Rush: 3 days',
    express   : 'Express: next day',
    overnight : 'Overnight'
}

var optionsGroup2 = {
    firstOvernight : 'First Overnight',
    expressSaver   : 'Express Saver',
    ground         : 'Ground'
}

$.each(groups, function(groupIndex, groupText) { 
    $('#shipping-options').append('<optgroup label="'+groupText+'" id="'+groupText+'" />');

    $.each(eval('optionsGroup' + groupIndex), function (optionText, optionIndex) {
        $('#'+groupText).append(new Option(optionIndex,optionText));
    });
});

$('#shipping-options').selectmenu("refresh");
$('#option-page').page();

HTML

<div data-role="page" data-theme="b" id="option-page"> 
    <div data-role="content"> 

       <div data-role="fieldcontain"> 
            <label for="shipping-options" class="select">Choose shipping method:</label> 
            <select name="shipping-options" id="shipping-options" data-native-menu="false"> 

            </select> 
        </div> 

    </div>
</div>