Question

I’m building a select list with an Ajax call that is triggered when another select list is changed.

The page loads correctly with the jQuery styling, but when I replace my ajax container with the new div I can’t get jQuery mobile to format it. This means that it reverts to the native select list format.

I have tried what is suggested in the JQM documentation:

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

but that does not work. My page initially loads with this:

<div id="ajax-destination">
     <select id="destinationAirport" data-native-menu="false">
      <option value="-- Please Select --" data-placeholder="true">-- Please Select --</option>
     </select>

and this is my jQuery code wrapped in the change function of the other select list.

$('#ajax-destination').empty();
$.post(url, { departureAirport : departureAirport }, function(data) {
    $('#ajax-destination').append(data);
var myselect = $("#destinationAirport");
myselect[0].selectedIndex = 1;
myselect.selectmenu("refresh");
});

The only other way I can think to do this is to return a JSON array via Ajax and use that to add the options to the select list, but I would prefer to just send formatted HTML because it’s simpler to follow.

Answer 1

If myselect.selectmenu("refresh"); or myselect.selectmenu("refresh",true); doesn’t work you can always refresh the page using

you could try myselect.trigger('create');