CODEWITHSUNDEEP
jqueryjquery-mobile
user481610
user481610

Reputation: 3270

Updating a select menu using jQuery Mobile

I currently have a page with one select menu called searchuniversity. Once the user selects something from this select menu I simply read the select menus value and then using that value read from an array. This array has multiple values with in it and based on those values I wish to added these values to the select menu searchuniversitycampus. Now for some reason everything is read out of the arrays properly as I have debugged the code but for some reason the select menu doesn't have any options added to it. Here is my code:

$(document).on('pageinit','#searchpage',
function()
{
    $('#searchuniversity').change(
    function() 
    {
        var IDSelected = $("#searchuniversity").val();
        var Arrayiterate = ArrayCampus[IDSelected];
        var SelectDropDown = document.getElementById("searchuniversitycampus");

        for (var i = 0; i < Arrayiterate.length; i++) 
        {
            var arrayofcampus = Arrayiterate[i];
            var CampusName = arrayofcampus[0];
            var CampusValue = arrayofcampus[1];
            var NewOption = new Option(CampusName,CampusValue);
            SelectDropDown.add(NewOption);
            SelectDropDown.selectedIndex = 0;
        };
        $("#searchuniversitycampus").closest('div.ui-select').show();
    });

}
);

I'm not sure why the code isn't working. Further information on the searchuniversitycampus element is that it is hidden on the page. I then populate it with options and the show it.

Upvotes: 0

Views: 92

Answers (1)

Jonathan Naguin
Jonathan Naguin

Reputation: 14766

Have try to refresh the select element?

//refresh value         
$('#searchuniversitycampus').selectmenu('refresh');

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

Upvotes: 1

Related Questions