Jquery mobile 动态设置opt group属性以选择

我通过以下方式向选择菜单添加新选项：

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

如何将选项组添加到选择菜单？

工作示例：

JS

var组={
1:‘美国药典’，
2:‘联邦快递’
};
变量选项组1={
标准：“标准：7天”，
拉什：“拉什：3天”，
快车：“快车：第二天”，
隔夜：“隔夜”
}
变量选项组2={
第一晚：“第一晚”，
expressSaver:“expressSaver”，
地面：“地面”
}
$.each（组、函数（组索引、组文本）{
$（“#装运选项”）。附加（“”）；
$.each（eval（'optionsGroup'+groupIndex））、函数（optionText、optionIndex）{
$（'#'+groupText）.append（新选项（optionIndex，optionText））；
});
});
$（“#配送选项”）。选择菜单（“刷新”）；
$（“#选项页”）.page（）；

HTML

选择运输方式：

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();

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