jquery droplist refresh

Question

我有一個下拉的問題...我有一個下拉頁面和一個按鈕保存..當你選擇一個選項下拉你想..然後點擊保存..價值去數據庫和存儲在那裏..當你再次進入此頁面...下拉菜單必須顯示您以前節省的值...但我有一個問題..當我來到這個網頁..下拉菜單不顯示我正確的價值..它顯示了我的第一個值..但是當我點擊它在這個菜單中選擇的選項是正確的..

我想也許我需要刷新它或什麼？

這裏是js->

<script> 
    $(document).ready(function() { 
     var defaultValue = Settings.getDefaultTimespan(); 


     if (defaultValue == $('#opt' + defaultValue).val()) { 

      $('#opt' + defaultValue).attr('selected','selected'); 
     } 

     $('#saveBtn').click(function() { 

      Settings.setDefaultTimespan(parseInt($('#timeSettingsDropList').val())); 

     }); 
    }); 
    </script> 

這裏是HTML - >>

  <div id="timespanSettings"> 
       <table> 
        <tr> 
         <td style="width: 15%"><p>Default timespan:</p></td> 
         <td style="width: 85%"><select name="timeDropList" id="timeSettingsDropList"> 
           <option id="opt0" value="0">6 Minutes</option> 
           <option id="opt1" value="1">10 Minutes</option> 
           <option id="opt2" value="2">15 Minutes</option> 
           <option id="opt3" value="3">30 Minutes</option> 
           <option id="opt4" value="4">1 Hour</option> 
         </select></td> 
        </tr> 
       </table> 

      </div> 

正如你可以看到..下拉菜單可顯示 「6分鐘」，但selcted是 「1小時」

Answer 1

不知道這是否會工作，但如何使用localStorage？活生生的例子：

• http://jsfiddle.net/phillpafford/trdYP/19/

JS：

var ts = localStorage.getItem('timeSelected'); 

var tsList = $('#timeSettingsDropList'); 
tsList[0].selectedIndex = ts; 
tsList.selectmenu("refresh"); 

$('#timeSettingsDropList').change(function() { 
    localStorage.setItem('timeSelected', $(this).val()); 
    ts = localStorage.getItem('timeSelected'); 
}); 

HTML：

<div data-role="page" id="home"> 
    <div data-role="content"> 
     <div id="timespanSettings"> 
      <table> 
       <tr> 
        <td style="width: 15%"><p>Default timespan:</p></td> 
        <td style="width: 85%"><select name="timeDropList" id="timeSettingsDropList"> 
          <option id="opt0" value="0">6 Minutes</option> 
          <option id="opt1" value="1">10 Minutes</option> 
          <option id="opt2" value="2">15 Minutes</option> 
          <option id="opt3" value="3">30 Minutes</option> 
          <option id="opt4" value="4">1 Hour</option> 
        </select></td> 
       </tr> 
      </table> 
     </div> 
     <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
      <li data-role="list-divider">Navigation</li> 
      <li><a href="#page2">View Page 2</a></li> 
     </ul> 
    </div> 
</div> 
<!-- Page 2 --> 
<div data-role="page" id="page2"> 
    <div data-role="content"> 
     <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
      <li data-role="list-divider">Navigation</li> 
      <li><a href="#home">View Home Page</a></li> 
     </ul> 
    </div> 
</div> 

Answer 2

要選擇下拉列表中的選項，您只需傳遞val方法如下。

$(document).ready(function() { 
     var defaultValue = Settings.getDefaultTimespan(); 

     $("#timeSettingsDropList").val(defaultValue); 

     $('#saveBtn').click(function() { 

      Settings.setDefaultTimespan(parseInt($('#timeSettingsDropList').val())); 

     }); 
    });