2015-01-20 4 views
1

Я использую JQuery Mobile для своего проекта. Когда я использую .empty(), чтобы очистить все содержимое внутри комбинированных ящиков, он не работает.Невозможно пустить() на комбинированные поля JQuery Mobile

МОЯ Код:

<select name="select-choice-a1" data-native-menu="false" id="vj"> 
        <option>Custom menu example</option> 
        <option value="standard">Standard: 7 day</option> 
        <option value="rush">Rush: 3 days</option> 
        <option value="express">Express: next day</option> 
        <option value="overnight">Overnight</option> 
       </select> 

Javascript:

$("#vj").empty(); 

И звоню это после того, как deviceready только.

Когда страница загружает HTML я дал изменяется в

<div class="ui-content" data-role="main"> 

       <a class="ui-btn ui-btn-inline ui-corner-all ui-shadow" href="#myPanel">Add Location</a> 

       <label class="select" for="select-choice-a1">Select Location</label> 
       <div class="ui-select"><a href="#" role="button" id="vj-button" aria-haspopup="true" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow"><span>Custom menu example</span></a><select id="vj" data-native-menu="false" name="select-choice-a1" tabindex="-1"> 
        <option data-placeholder="true">Custom menu example</option> 
        <option value="standard">Standard: 7 day</option> 
        <option value="rush">Rush: 3 days</option> 
        <option value="express">Express: next day</option> 
        <option value="overnight">Overnight</option> 
       </select><div style="display: none;" id="vj-listbox-placeholder"><!-- placeholder for vj-listbox --></div></div> 

       <label class="ui-hidden-accessible" for="textinput-hide">RFID:</label> 
       <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input type="text" value="" placeholder="Text input" name="textinput-hide"></div> 

       <label class="ui-hidden-accessible" for="textinput-hide">Details:</label> 
       <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input type="text" value="" placeholder="Text input" name="textinput-hide"></div> 

      </div> 
+0

Ваш код работает нормально: http://jsfiddle.net/yL2cn8g8/. Возможно, вам понадобится добавить больше контекста (в JS), чтобы увидеть, где он не работает. Что вы видите в журнале ошибок? –

+0

Хорошо, проблема в том, что я даю data-native-menu = "false" Я не могу очистить поле со списком – user3383301

+0

Я обновил jsfiddle с помощью вашего кода (http://jsfiddle.net/yL2cn8g8/4/), и он отлично работает с 'data-native-menu =" false "'. Опять же, вам нужно добавить больше контекста JavaScript и журналов, чтобы увидеть, что-то вокруг '$ (" # vj "). Empty();' не работает –

ответ

1

Это custom selectmenu превращается в всплывающее окно. Я думаю, что .empty() не будет работать без destroying selectmenu и создать его с нуля.

Так что вам нужно сделать следующее.

$("#vj") 
    .selectmenu("destroy") // destory it 
    .empty();    // remove options 

После этого добавьте новые параметры.

$("#vj").append("<option>"); 

После добавления новых опций, убедитесь, чтобы создать его снова, используя .selectmenu() функцию.

$("#vj").selectmenu(); 

Просмотреть работу в этом demo.

+0

Отлично! Тон Спасибо! – user3383301

1

Каждый раз, когда вы меняете содержимое JQuery Mobile selectmenu виджета, вы должны сказать jQM, чтобы обновить виджет:

$(".selector").selectmenu("refresh", true); 

API: http://api.jquerymobile.com/selectmenu/#method-refresh

В вашем случае:

$("#vj").empty().selectmenu("refresh", true); 

Передача истинным силам jQM для восстановления виджета, поэтому вам не нужно уничтожать и повторно инициализировать.

Смежные вопросы