更改頁面上的選擇更改

Question

我正在使用jQuery Mobile並試圖找出如何使用選擇下拉列表和一些jQuery正確更改頁面。我遇到的問題是頁面加載的內容，但如果我繼續切換選定的值，頁面加載多次。我假設這是因爲上次選擇的頁面內容仍然存在於DOM中？這是我到目前爲止有：

的jQuery：

$(document).ready(function() { 
    $("select[name=ProjectID]").change(function() { 
     var projectID = $(this).val(); 
     window.location.hash = "/tasks.cfm?pid=" + projectID; 
    }); 
}); 

HTML：

<select name="ProjectID"> 
    <option value="1">Project 1</option> 
    <option value="2">Project 2</option> 
</select> 

使用$ .mobile.changePage（）嘗試過，但看到了同樣的結果。任何方式來解決這個問題？

Answer 1

我會去這樣的：

• http://jsfiddle.net/TrghW/1/

JS

$('.navigateToPage').change(function() { 
    var page = $(this).val(); 
    $.mobile.changePage("#"+page, { transition: "slideup"}); 
}); 

HTML

<div data-role="page" id="home"> 
    <div data-role="content">   
     <label for="pages" class="select">Navigate to page:</label> 
     <select name="pages" id="selectPages" class="navigateToPage"> 
      <option>Select a Page</option> 
      <option value="page2">Page 2</option> 
      <option value="page3">Page 3</option> 
      <option value="page4">Page 4</option> 
      <option value="page5">Page 5</option> 
     </select> 
     <br /> 
     <span>This is the Home Page</span>  
    </div> 
</div> 

<div data-role="page" id="page2"> 
    <div data-role="content">   
     <label for="pages2" class="select">Navigate to page:</label> 
     <select name="pages2" id="selectPages2" class="navigateToPage"> 
      <option>Select a Page</option> 
      <option value="home">Home Page</option> 
      <option value="page3">Page 3</option> 
      <option value="page4">Page 4</option> 
      <option value="page5">Page 5</option> 
     </select> 
     <br /> 
     <span>This is Page 2</span> 
    </div> 
</div> 

<div data-role="page" id="page3"> 
    <div data-role="content">   
     <label for="pages3" class="select">Navigate to page:</label> 
     <select name="pages3" id="selectPages3" class="navigateToPage"> 
      <option>Select a Page</option> 
      <option value="home">Home Page</option> 
      <option value="page2">Page 2</option>   
      <option value="page4">Page 4</option> 
      <option value="page5">Page 5</option> 
     </select> 
     <br /> 
     <span>This is Page 3</span>  
    </div> 
</div> 

<div data-role="page" id="page4"> 
    <div data-role="content">   
     <label for="pages4" class="select">Navigate to page:</label> 
     <select name="pages4" id="selectPages4" class="navigateToPage"> 
      <option>Select a Page</option> 
      <option value="home">Home Page</option> 
      <option value="page2">Page 2</option>   
      <option value="page3">Page 3</option> 
      <option value="page5">Page 5</option> 
     </select> 
     <br /> 
     <span>This is Page 4</span>  
    </div> 
</div> 

<div data-role="page" id="page5"> 
    <div data-role="content">   
     <label for="pages5" class="select">Navigate to page:</label> 
     <select name="pages5" id="selectPages5" class="navigateToPage"> 
      <option>Select a Page</option> 
      <option value="home">Home Page</option> 
      <option value="page2">Page 2</option>   
      <option value="page3">Page 3</option> 
      <option value="page4">Page 4</option> 
     </select> 
     <br /> 
     <span>This is Page 5</span>  
    </div> 
</div>