Question

我目前正在我的网页上使用jQuery Mobile 1.4.5。以下是我遇到问题的具体方案。

我有一个使用选择菜单小部件的选择列表。它首先隐藏在页面上（在同一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');
});

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

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

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

Answer 1

每次取消选择选项对话框时，都会再次触发主页面显示事件。所以无论你选择什么，都会被覆盖。

您可以使用 pagecontainer widget's show 事件，只有在上一页不是对话框时才设置选择值：

$( 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 Mobile：对话框选择不会在点击时更新

1 个答案: