0

我的移动页面有 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");
    });

现在选择菜单不会刷新。在源代码中（使用萤火虫）选择了正确的项目，但在前端它显示了错误的项目。好像 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);
    });

不要介意长选择器，我只是想确保我有正确的下拉列表；）

4

3 回答 3

0

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

于 2013-07-04T08:40:56.167 回答
0

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

<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>

列表视图：http : //jquerymobile.com/demos/1.2.1/docs/lists/docs-lists.html

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

于 2013-07-04T09:59:04.770 回答
0

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

<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);
    });

不要介意长选择器，我只是想确保我有正确的下拉列表；）

于 2013-07-05T07:29:29.470 回答