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 set the properties like a default selected option and optgroup options available in JQM?

Answer 1

Live Example: http://jsfiddle.net/rULKH/5/

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

        <div data-role="fieldcontain"> 
            <label for="SelectMenu" class="select">Select Menu</label> 
            <select name="SelectMenu" id="SelectMenu"> 
                <option value="standard">Standard: 7 day</option> 
                <option value="rush">Rush: 3 days</option> 
                <option value="express">Express: next day</option> 
                <option value="overnight">Overnight</option> 
            </select> 
        </div> 

    </div>
</div>

JS

var options1 = {
    val1 : 'text1',
    val2 : 'text2'
};

$.each(options1, function(val, text) {
    $('#SelectMenu').append(new Option(text,val)).val( val ).attr('selected',true).selectmenu("refresh");
});