Search code examples
jquery-mobileselect-menu

How can we select an option while loading them in Select Menu


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?


Solution

  • 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");
    });