asp.net mvc 3 - jQuery mobile not displaying correct selected item in list

Question

I have a select list. I am using jQuery to update the selected item. The displayed item in the box isn't updating when I change the selected value. In the following example option "a" is set as selected. Then I use jQuery to change the selected item to "d". It still shows "a". However if you expand the list you can see that "d" is selected or highlighted. Not sure how to fix the issue. Any help would be appreciated!

http://jsfiddle.net/9wQcs/5/

Html:

<select id="t">
  <option>select one</option>
  <option id="a" selected="selected">a</option>
  <option id="b">b</option>
  <option id="c">c</option>
  <option id="d">d</option>
</select>

jQuery:

$(document).ready(function () {
$('#d').prop('selected', 'selected');
});

Thanks, Brian

Answer 1

First of all, refrain from using .ready() in jQuery Mobile.

When selecting an option programmatically, you need to re-ehance selectmenu widget.

$("#id").prop("selected", true);
$("select_id").selectmenu("refresh");

Demo