jQuery Mobile: выбор диалогового окна не обновляется при нажатии

Question

В настоящее время я использую jQuery Mobile 1.4.5 на своей странице. Вот конкретный сценарий, с которым у меня возникают проблемы.

У меня есть список выбора, используя виджет меню выбора. Сначала он скрывается на странице (на отдельной странице мобильного jQuery в том же файле HTML).

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

Теперь, когда я нажимаю на выпадающем списке, она открывает диалоговое окно, потому что это больше, чем экран (который, как ожидается, поведение). Однако, когда я нажимаю на один из параметров, он не обновляется. Он все равно скажет «Вариант 12» независимо от того, какой другой вариант я нажимаю.

Если я не устанавливаю значение с помощью 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