JQuery 移动设备：selectmenu()，native-menu=false，<option> 通过 JS 抛出添加了占位符：无法在初始化之前调用 listview 上的方法

Question

我尝试将 <option data-placeholder=true>placeholder value</option> 到 JavaScript 添加到现有的 JQuery 手机 selectmenu()。

我让它在没有占位符的情况下工作，如 JSFiddle（版本 8）所示：http://jsfiddle.net/nyluje/jg5cgw76/8/

为了添加占位符，我在函数的开头添加了以下行 flipswitchChangesSingleSelToMultipleSel:

targetSelect = $('body').find('select[id='+selectContainerId+']');

if($(targetSelect).find('[data-placeholder="true"]').length==0){
  phOption = document.createElement('option');
  $(phOption).attr('data-placeholder','true');
    $(phOption).text("Do a choice");
    $(targetSelect).prepend(phOption);       }

我用它更新了 JSFiddle 到一个新版本（第 9 版）： http://jsfiddle.net/nyluje/jg5cgw76/9/

占位符 "Do a choice" 确实按预期显示，但选择完成后，它在调试控制台中显示："Uncaught Error: cannot call methods on listview prior to initialization; attempted to call method 'destroy'"。

我看了一圈，好像是个普遍问题，解决方法建议加listview().listview('refresh')解决。所以我试图抓住 DOM 和 <ul> 元素：<ul class="ui-selectmenu-list ui-listview" id="select-menu" role="listbox" aria-labelledby="select-button"> 并应用到它 listview().listview('refresh') 但它不起作用。

有什么想法吗？

Answer 1

解决了我的问题，我更新了 JSFiddle（版本 10）：http://jsfiddle.net/nyluje/jg5cgw76/10/

我添加了：selectmenu() before 关于占位符的代码和 selectmenu('refresh') after 它：

targetSelect.selectmenu();

if($(targetSelect).find('[data-placeholder="true"]').length==0){
  phOption = document.createElement('option');
  $(phOption).attr('data-placeholder','true');
    $(phOption).text("Do a choice");
    $(targetSelect).prepend(phOption);
 }

targetSelect.selectmenu('refresh');

JQuery 移动设备：selectmenu()，native-menu=false，<option> 通过 JS 抛出添加了占位符：无法在初始化之前调用 listview 上的方法

JQuery Mobile: selectmenu(),native-menu=false,<option> with placeholder added thru JS throws: cannot call methods on listview prior to initialization

jquery-mobile