jQuery Mobile 和 Select 菜单，其中包含 URL

Question

已经

为此斗争了一段时间。我正在尝试让选择菜单用作导航菜单，但我无法让 URL 工作并让它实际更改页面。

在头部：

<script>
$(function() {
    $("#select-choice-1").click(function() {
        $.mobile.changePage($("#select-choice-1"));
    });        
});
</script>

使用此菜单：

<div id="MobileWrapper" data-role="fieldcontain">
<select name="select-choice-1" id="select-choice-1" data-theme="a" data-form="ui-btn-up-a" data-mini="true">
<option data-placeholder="true">Navigation</option><!-- data=placeholder makes this not show up in the pop up-->
<option value="/index.php" data-ajax="false">Home</option>
<option value="/services/index.php" data-ajax="false">Services</option>
<option value="/trainers/index.php" data-ajax="false">Trainers</option>
<option value="/locations/index.php" data-ajax="false">Locations</option>
<option value="/calendar/index.php" data-ajax="false">Calendar</option>
<option value="/contactus/index.php" data-ajax="false">Contact Us</option>
</select>
</div><!--END MobileWrapper DIV-->

Answer 1

尝试

$(function() {
    $("#select-choice-1").change(function() {
        $.mobile.changePage($(this).val());
    });        
});

您告诉jQuery mobile在用户每次单击下拉菜单时都切换到下拉菜单。

仅当从下拉列表中选择新选项并$(this).val()以获取所选项的值时，才会触发.change。

更新

上述解决方案解决了部分问题，但导航仍然无法正常工作，因为......

导航 URL 被解析为http://www.domain.com/...，页面加载在 http://domain.com/... 和 jQuery 移动版默认阻止跨域页面。

有一些解决方案（未经测试）

1. 在文档页眉
   中添加基本标签 <base href="http://domain.com/" />
2. 在 DOM 准备就绪之前，通过在 DOM 准备就绪
   之前设置以下内容，在 jQuery 中允许跨域页面 $.mobile.allowCrossDomainPages = true

Answer 2

不知道为什么，但是如果我切换到早期版本的jQuery mobile，我的菜单可以工作：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>