Question

我正在使用jQuery Mobile并试图找出如何使用select下拉菜单和一些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>

选择更改时更改页面

1 个答案: