title: JQuery mobile select menu not working properly
body: <p>I'm working on a Ruby and Sinatra project, and for a particular page I'm using jQuery mobile to create a mobile version of the page. I'm using knockout.js in the project as well.</p>
  
  <p>I have a select box which appears correctly but when I make a selection, its text doesn't change though the value changes.</p>
  
  <p>Here is my HAML code:</p>
  
  <pre><code>#subscriptions-content-div{'data-role' =&gt; 'content'}
    %ol{'data-role' =&gt; 'listview', 'data-inset' =&gt; 'true', 'data-bind' =&gt; 'foreach: misspelt'}
      %li
        %h3{ 'data-bind' =&gt; 'text: show_name'}
        - if shows.empty?
          No Shows in Database
        - else
          %select#show
            %option{'value' =&gt; 'no_choice', 'data-placeholder' =&gt; 'true'} Select a Show
            - shows.each do |show|
              %option{'value' =&gt; show.id}
                = show.name
        %button.btn{ 'data-bind' =&gt; 'click: $root.resolveSubscription', 'data-inline' =&gt; 'true', 'data-icon' =&gt; 'check', 'data-theme' =&gt; 'a'}
          Save
  </code></pre>
  
  <p>This is the HTML I get when I view the page source:</p>
  
  <pre><code>&lt;div data-role='content' id='subscriptions-content-div'&gt;
        &lt;ol data-bind='foreach: misspelt' data-inset='true' data-role='listview'&gt;
  
          &lt;li&gt;
            &lt;h3 data-bind='text: show_name'&gt;&lt;/h3&gt;
            &lt;select id='show'&gt;
              &lt;option data-placeholder='true' value='no_choice'&gt;Select a Show&lt;/option&gt;
              &lt;option value='50594de40ea69713630000de'&gt;
                The Night Show
              &lt;/option&gt;
              &lt;option value='50594de40ea69713630000df'&gt;
                Another Show
              &lt;/option&gt;
  
              &lt;option value='50594de40ea69713630000e0'&gt;
                Yet Another Show
              &lt;/option&gt;
            &lt;/select&gt;
            &lt;button class='btn' data-bind='click: $root.resolveSubscription' data-icon='check' data-inline='true' data-theme='a'&gt;
              Save
            &lt;/button&gt;
          &lt;/li&gt;
        &lt;/ol&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The menu has 'Select a Show' as the title. When I select something else, this doesn't change but the value changes. I can tell it changes when I get the value of the selected option. Why won't the text change?</p>