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>
</select>

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.

FOUND THIS USEFUL? SHARE IT

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!

    Reply

Leave a comment -