jQuery Mobile, Select not showing selected option until clicked

Question

I'm trying to add <options> to several <select> dinamically via ajax, when I add them directly in the HTML works fine, but when I load them in AJAX they will not show the selected option until the <select> element is clicked.

I've tried to .trigger('create') on all elements and even .enhanceWithin() but to no avail.

This jsfiddle shows the problem: http://jsfiddle.net/3c01g6e2/1/

Any help please?

Answer 1

From the demo page (also see documentation ):

If you manipulate a select via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:

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

If you add $("select").selectmenu("refresh"); to the end of your fiddle, it updates correctly. (Updated Fiddle)