Question

我的移动页面有2个“页面”（使用jQuery Mobile的多页模板）。现在我有一个语言选择器（下拉列表）。此选择器出现在两个页面上。

相关代码：

<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="scripts/style/jquery.mobile-1.3.1.min.css" />
<script src="scripts/javascript/jquery-1.9.1.min.js"></script>
<script src="scripts/javascript/jquery.mobile-1.3.1.min.js"></script>
<script src="scripts/javascript/translations.js"></script>
</head>
<body>
    <div class="container">
        <form action="#" method="POST">
            <div class="formContent" data-role="page" id="one">
                <div data-role="header" class="ui-header-fixed">
                    <div data-role="navbar">
                        <ul>
                            <li></li>
                            <li><label for="language" class="select"></label> <select
                                name="language" id="language" class="lang" data-corners="false"
                                data-iconpos="noicon" onchange="trans($(this));">
                                    <option value="english">En</option>
                                    <option value="dutch">Nl</option>
                                    <option value="german">De</option>
                            </select></li>
                        </ul>
                    </div>
                </div>
                <div class="content">
                    <!-- Content -->
                </div>
                <div data-role="footer" data-id="foo1" data-position="fixed">
                    <div data-role="navbar">
                        <ul>
                            <li><a href="#one" class="ui-disabled">Vorige</a></li>
                            <li><a href="#two">Volgende</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="formContent" data-role="page" id="two">
                <div data-role="header" class="ui-header-fixed">
                    <div data-role="navbar">
                        <ul>
                            <li></li>
                            <li><label for="language" class="select"></label> <select
                                name="language" id="language" class="lang" data-corners="false"
                                data-iconpos="noicon" onchange="trans($(this));">
                                    <option value="english">En</option>
                                    <option value="dutch">Nl</option>
                                    <option value="german">De</option>
                            </select>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="content">
                    <!-- Content -->
                </div>
                <div data-role="footer" data-id="foo1" data-position="fixed">
                    <div data-role="navbar">
                        <ul>
                            <li><a href="#one">Vorige</a></li>
                            <li><a href="#two" class="ui-disabled">Volgende</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script>
        translate($('.lang').val());
        function trans(it){
            var v = it.val();
            translate(v);
            $(".lang option[value='" + v + "']").attr('selected', 'selected');
        }
    </script>
</body>
</html>

翻译（）;包含翻译。 trans（）函数的最后一行应该设置两个选择器的选定选项。

现在，当我在第一页上选择一种语言时，两个选择器上的选定值都会发生变化。但是当我在第二页上选择一种语言时，两个选择器上的选定值都不会改变。

为什么会这样，我该如何解决？

修改

终于有了工作：

    $(document).on('change', '#language', function () {
        var v = $(this).val();
        translate(v);
        $("#language option").removeAttr('selected');
        $("#language option[value='" + v + "']").attr('selected', 'selected');
        $("#language").selectmenu("refresh");
    });

现在选择菜单不刷新。在源代码中（使用firebug）选择了正确的项目，但在前端显示错误的项目。好像是selectmenu（'refresh'）;没有办法。

解决

我最终自己设置了显示值：

$(document).on('change', '#language', function () {
        var v = $(this).val();
        translate(v);
        $("#language option").removeAttr('selected');
        $("#language option[value='" + v + "']").attr('selected', 'selected');
        $(".ui-header .ui-navbar .ui-grid-a .ui-block-b .ui-select .ui-btn .ui-btn-inner .ui-btn-text span").html(v);
    });

不介意长选择器，我只想确保我有正确的下拉菜单;）

Answer 1

如果您在2个sperate文件中执行此操作，请使用index.html和contact.html，例如，当您使用jqm调用第二个页面时，它使用ajax请求加载第二个内容，并且按内容我的意思是仅限正文，ajax请求不会加载在<body></body>标记之外找到的内容，因此，如果您的脚本在<head></head>中找到，或者在文件末尾找不到，则您有两个解决方案： 1）将你的脚本写在正文中，主要是在div或表格之后 2）如果您通过链接调用页面，请将属性data-ajax="false添加到您的锚标记中，以防止jqm使用ajax

Answer 2

尝试更新您的列表视图和/或在翻译功能结束时选择：

<script>
        translate($('.lang').val());
        function trans(it){
            var v = it.val();
            translate(v);
            $(".lang option[value='" + v + "']").attr('selected', 'selected');
            $('#giveAnIDtoYourListview').listview('refresh');
            $('#giveAnIDtoYourSelect').selectmenu('refresh');
        }
    </script>

Listview：http://jquerymobile.com/demos/1.2.1/docs/lists/docs-lists.html

选择：http://jquerymobile.com/demos/1.2.0/docs/forms/selects/methods.html

Answer 3

我最终自己设置了显示值：

<label for="language" class="select"></label> <select
                                name="language" id="language" class="lang" data-corners="false"
                                data-iconpos="noicon">
                                    <option value="En">Lang</option>
                                    <option value="En">En</option>
                                    <option value="Nl">Nl</option>
                                    <option value="De">De</option>
                            </select>

$(document).on('change', '#language', function () {
        var v = $(this).val();
        translate(v);
        $("#language option").removeAttr('selected');
        $("#language option[value='" + v + "']").attr('selected', 'selected');
        $(".ui-header .ui-navbar .ui-grid-a .ui-block-b .ui-select .ui-btn .ui-btn-inner .ui-btn-text .lang").html(v);
    });

不介意长选择器，我只想确保我有正确的下拉菜单;）

jQuery Mobile无法在页面转换后获得对象

修改

解决

3 个答案: