JQuery mobile does not display the correct selected item in the list

I have a selection list. I am using jQuery to update the selected element. The displayed item in the box does not change when the selected value changes. In the following example, option "a" is set as selected. Then I use jQuery to change the selected element to "d". It still shows "a". However, if you expand the list, you will see that "d" is selected or highlighted. Do not know how to solve the problem. 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