how to programmatically select an option of a dropdown list in jquery mobile

Question

I need to select an option from the dropdownlist programmatically as soon as the document gets ready

Like for example i have this code

<div class="ui-select">
            <select name="DropDownList" id="DropDownList"
                data-native-menu="false" tabindex="-1">
                <option value="data1">Data1</option>
                <option value="data2">Data2</option>
                <option value="data3">Data3</option>
                <option value="data4">Data4</option>
            </select>
        </div>

Now if i select it manually then the option gets selected.But i need to select an option pro-grammatically as soon as document gets ready.How to do it?

Answer 1

var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

Script taken from: http://jquerymobile.com/demos/1.0a4/docs/forms/forms-selects.html

Answer 2

You can get the selected option using jQuery and use jQUery mobile event 'pageshow' which is the equivalent to 'ready' event on jQuery but not advised to mobile sites

$("div[data-role*='page']").live('pageshow', function(event, ui) {
    $("#DropDownList").find(":selected").val();
});