JQuery手機選擇菜單無法正常工作

我正在開發一個Ruby和Sinatra項目，並且我正在使用jQuery mobile創建一個移動版本的頁面。我在項目中也使用了knockout.js。JQuery手機選擇菜單無法正常工作

我有一個正確顯示的選擇框，但是當我做出選擇時，它的文本不會改變，但值會改變。

這裏是我的HAML代碼：

#subscriptions-content-div{'data-role' => 'content'} 
    %ol{'data-role' => 'listview', 'data-inset' => 'true', 'data-bind' => 'foreach: misspelt'} 
    %li 
     %h3{ 'data-bind' => 'text: show_name'} 
     - if shows.empty? 
     No Shows in Database 
     - else 
     %select#show 
      %option{'value' => 'no_choice', 'data-placeholder' => 'true'} Select a Show 
      - shows.each do |show| 
      %option{'value' => show.id} 
       = show.name 
     %button.btn{ 'data-bind' => 'click: $root.resolveSubscription', 'data-inline' => 'true', 'data-icon' => 'check', 'data-theme' => 'a'} 
     Save

這是HTML我得到的，當我查看網頁源：

<div data-role='content' id='subscriptions-content-div'> 
     <ol data-bind='foreach: misspelt' data-inset='true' data-role='listview'> 

     <li> 
      <h3 data-bind='text: show_name'></h3> 
      <select id='show'> 
      <option data-placeholder='true' value='no_choice'>Select a Show</option> 
      <option value='50594de40ea69713630000de'> 
       The Night Show 
      </option> 
      <option value='50594de40ea69713630000df'> 
       Another Show 
      </option> 

      <option value='50594de40ea69713630000e0'> 
       Yet Another Show 
      </option> 
      </select> 
      <button class='btn' data-bind='click: $root.resolveSubscription' data-icon='check' data-inline='true' data-theme='a'> 
      Save 
      </button> 
     </li> 
     </ol> 
    </div>

菜單上有「選擇顯示」作爲標題。當我選擇別的東西時，這個不會改變，但值會改變。當我獲得所選選項的值時，我可以將其更改。爲什麼文本不會改變？

來源

2012-09-19 jokham

這個小提琴是否反映了您的問題？ http://jsfiddle.net/aib42/kJJnJ/ – aib

如果您正在向選擇菜單動態添加選項，那麼刷新選擇菜單可能會有幫助。

$('#show').selectmenu(); 
$('#show').selectmenu('refresh');

來源

2012-09-19 05:05:16 boring

我試過了。仍然不起作用 – jokham

解決方案是將推遲選擇初始化直到已經施加的KO綁定之後。我將data-role="none"屬性添加到了select元素，並在ko.applyBindings()之後手動調用$.selectmenu() - 如下所示：http://jsfiddle.net/aib42/xtz5B/

來源

2012-12-26 11:24:46 aib

JQuery手機選擇菜單無法正常工作

回答

相關問題