Loganj99
Loganj99

Reputation: 449

jQuery mobile not displaying correct selected item in list

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

Upvotes: 0

Views: 328

Answers (1)

Omar
Omar

Reputation: 31732

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

Upvotes: 1

Related Questions