Question

Using jQueryMobile, when I change the contents of a select widget and then call ‘refresh’ on it, the text of the selected option is not changed. Here’s the scenario…

The ‘select’ widget exists in the page div already. When the user goes to that screen, the options are dynamically created based on the button they selected to go to that page. This option list is built and added as per

$('#searchReasonList').append(optionList)

The first time into the new page all works well. When they navigate away and come back in, I do

$('#searchReasonList').empty()

Then I build the correct option list and do the same append and call:

$('#searchReasonList').selectmenu('refresh',true)

The native select is indeed refreshed, and I am able to choose from the options. However, the selected option doesn’t show up. Only the placeholder is seen.

To show the enhanced markup:

<div class="ui-select">
  <div class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-c" data-theme="c">
    <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">Select Reason</span>
      <span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
    </span>

    <select id="searchReasonList" name="searchReasonList" data-placeholder="true">
      <option value="">Select Reason</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  </div>
</div>

It’s that span tag with class='ui-btn-text' that is not being updated with the selected option’s label. It just stays “Search Reason”, which is the label of my placeholder.

Is there something else that needs to be done?

Answer 1

Using jQuery 1.0.1 (latest stable version at this time) you can use .selectmenu('refresh') to refresh a select-widget.

$('select').empty().append('<option value="foo">Bar</option>').selectmenu('refresh');

Here is a demo: http://jsfiddle.net/4Thzt/

When you use $('select').selectmenu('refresh', true); (notice the , true), you are forcing the widget to not only be refreshed, but rebuilt, which will always show the placeholder text. Source: http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/selects/methods.html