jQuery Mobile Change DropDown Selected Option and refresh it

Question

I am writing jQuery Mobile App. I am changing drop-down selected option via below statement:- $(\"#DataBaseNames\").val(db);

I am sure about correct db value being

Answer 1

If you want to change one dropdown based on another use this.

<link href="code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" rel="stylesheet"/>
<link href="jquery/css/index.css" rel="stylesheet"/>
<link href="../favicon.ico" rel="shortcut icon"/>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet"/>
<link href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>

<script type="text/javascript">

    function ItemNo()
    {
    var no = $('#sltItemNo')[0].selectedIndex;

    var myselect = $("select#sltItemName");
    myselect[0].selectedIndex =no;
    myselect.selectmenu("refresh");
    }
    function ItemName()
    {
    var no = $('#sltItemName')[0].selectedIndex;

    var myselect = $("select#sltItemNo");
    myselect[0].selectedIndex =no;
    myselect.selectmenu("refresh");
    }

</script>

<select id="sltItemNo"  onchange="ItemNo()" data-shadow="false" data-mini="true">
   <option value="Abc">1</option>
   <option value="Cde">2</option>
   <option value="Efg">3</option>
</select>

<select id="sltItemName"  onchange="ItemName()" data-shadow="false" data-mini="true">
   <option value="1">Abc</option>
   <option value="2">Cde</option>
   <option value="3">Efg</option>
</select>

Answer 2

refresh update the custom select

This is used to update the custom select to reflect the native select element's value.If the number of options in the select are different than the number of items in the custom menu, it'll rebuild the custom menu. Also, if you pass a true argument you can force the rebuild to happen.

//refresh value         
$('select').selectmenu('refresh');

//refresh and force rebuild
$('select').selectmenu('refresh', true);

Docs:

• http://jquerymobile.com/demos/1.0rc3/docs/forms/selects/methods.html

Answer 3

I checked this link and found it working for me. Try this:

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