CODEWITHSUNDEEP
jqueryjquery-mobile
Anand
Anand

Reputation: 4551

jQuery Mobile Change DropDown Selected Option and refresh it

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 passed, as i checked it via alert. When I drill down the drop down, it also shows the correct text selected, but dropdown itself is not showing the correct text as selected.

Any refresh call I need to insert?

Edit:-Adding code, below answer from phill solved it

<script type="text/javascript">   

        $("#@ViewBag.DivTitle").live('pageshow', function () {

            var db = getCookie("DataBaseNames");

            $("#DataBaseNames").val(db);            
            $("#DataBaseNames option[value='"+ db + "']").attr("selected", "selected");

            //      refresh value , Following is what is required        
            $('select').selectmenu('refresh');

            $("#cmdLogOn").live("click", function () {
                var dbSelected = $("#DataBaseNames option:selected").text();              
                setCookie('DataBaseNames', dbSelected);
            });
        });

        function setCookie(name, value) {
          var expires = "";
            document.cookie = name + "=" + value + expires + "; path=/";
        }

        function getCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }
    </script>

Upvotes: 13

Views: 45037

Answers (3)

user3383017
user3383017

Reputation: 13

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>

Upvotes: 0

Silver
Silver

Reputation: 55

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

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

Upvotes: 2

Phill Pafford
Phill Pafford

Reputation: 85298

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:

Upvotes: 38

Related Questions