jQuery 移动设备：对话框 select 不会在点击时更新

Question

我目前在我的页面上使用 jQuery Mobile 1.4.5。这是我遇到麻烦的具体情况。

我有一个使用 select 菜单小部件的 select 列表。它首先隐藏在页面上（在同一 HTML 文件中的单独 jQuery 移动页面中）。

<select name="title-dropdown" id="title-dropdown" data-native-menu="false">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
    <option value="7">Option 7</option>
    <option value="8">Option 8</option>
    <option value="9">Option 9</option>
    <option value="10">Option 10</option>
    <option value="11">Option 11</option>
    <option value="12">Option 12</option>
    <option value="13">Option 13</option>
    <option value="14">Option 14</option>
    <option value="15">Option 15</option>
    <option value="16">Option 16</option>
    <option value="17">Option 17</option>
    <option value="18">Option 18</option>
    <option value="19">Option 19</option>
    <option value="20">Option 20</option>
    <option value="21">Option 21</option>
    <option value="22">Option 22</option>
</select>

当页面显示时，我使用jQuery更新值。

$( document ).on( "pageshow", "#edit-page", function() {
    $('#title-dropdown').val('12').selectmenu('refresh');
});

现在，当我单击下拉菜单时，它会打开一个对话框，因为它比屏幕长（这是预期的行为）。但是，当我单击其中一个选项时，不会更新。无论我点击什么其他选项，它仍然会显示 "Option 12"。

如果我不使用 jQuery 设置值，则下拉菜单可以正常工作。如果我减少选项的数量，那么它就不需要使用对话框，它就可以正常工作。只有当我通过 jQuery 更新值时，当它使用一个长列表时它才会中断。

关于为什么 select 对话框在这种情况下不再有效的任何想法？

Answer 1

每次关闭select选项的对话框，都会再次触发主页显示事件。所以无论你select，它总是被覆盖。

如果上一页不是对话框，您可以改用 pagecontainer widget's show 事件并仅设置 select 值：

$( document ).on( "pagecontainershow", function( event, ui ) {
    if (ui.toPage.prop("id") == "edit-page" && ui.prevPage.prop("id") != "title-dropdown-dialog" ){
        $('#title-dropdown').val('12').selectmenu("refresh");
    }
});

DEMO

jQuery 移动设备：对话框 select 不会在点击时更新

jQuery Mobile: Dialog select does not update on click

mobile

jquery

jquery-mobile