更改页面上的选择更改

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>