Dynamically changing select value of jQuery Mobile select box
jQuery mobile gives you a very beautiful UI which is compatible with all popular mobile device platforms and i must say its very easy to learn as well.
It gives you a very nice select menu instead of typical select box that we see on our web site, for this we just need to add attribute “data-native-menu” in our select and we are done, e.g;
[java]
<select name="reminderSettings" id="reminderSettings" data-native-menu="false">
<option value="1" selected="selected">1 day before</option>
<option value="2">2 days before</option>
<option value="3">3 days before</option>
<option value="5">5 days before</option>
</select>
[/java]
But the problem occurs when we need to change the selected value dynamically. Usually we write the following code to change the selected values of select box.
[java]
function setOptionValue(value){
var reminderSettings = $("#reminderSettings");
reminderSettings.val(value).attr(‘selected’, true).siblings(‘option’).removeAttr(‘selected’);
}
[/java]
It will definitely change the selected value but the UI will not reflect it, to reflect this on the UI as well we need to refresh our select box.
[java]
reminderSettings.selectmenu("refresh", true);
[/java]
We need to add the above line after changing our select value and its done.
Pingback: Go Funex!! | jQueryMobile 환경에서 Select Option의 동적 선택이 안될때
Spent a couple of hours searching for a solution to this problem.
Nothing worked until I found this posting.
Thank you so much!