Dynamically changing select value of jQuery Mobile select box

23 / Sep / 2012 by Uday Pratap Singh 2 comments

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;
<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>

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.
function setOptionValue(value){
var reminderSettings = $("#reminderSettings");
reminderSettings.val(value).attr(‘selected’, true).siblings(‘option’).removeAttr(‘selected’);
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.
reminderSettings.selectmenu("refresh", true);

We need to add the above line after changing our select value and its done.


comments (2)

  1. Pingback: Go Funex!! | jQueryMobile 환경에서 Select Option의 동적 선택이 안될때

  2. Ivan Gonzalez

    Spent a couple of hours searching for a solution to this problem.

    Nothing worked until I found this posting.

    Thank you so much!


Leave a Reply

Your email address will not be published. Required fields are marked *