我无法更新jQuery Mobile选择。根据需要,我想更改内容并更新所选值。
这里是小提琴(下面的代码): http://jsfiddle.net/cjindustries/0cmg8vvt/2/
我在控制台中收到此错误(以及选择不更新): 未捕获错误:在初始化之前无法调用selectmenu上的方法;试图调用方法'刷新'
我在这里看到过类似的事情,但我找到的答案都没有解决我的问题。 我们正在使用jQueryMobile 1.3.1和jQuery 1.9.1。
任何帮助将不胜感激:)
谢谢, 克里斯。
...代码
<div data-role="page" id="p1">
<div data-role="content">
<h1>Page 1</h1>
<select class="pageSelect"></select>
<a href="#" id="update-select-1" data-role="button">Update Select Menu</a>
</div>
</div>
function generateOptions() {
var numbers = [],
html = "";
for (var i=0; i<100; i++) {
var v = Math.random();
numbers.push(v);
html = html + '<option value="' + v + '">' + v + '</option>';
};
return {
html: html,
value: numbers[5]
};
};
$(document).on('click', '#update-select-1', function() {
var options = generateOptions(),
select = $.mobile.activePage.find('.pageSelect');
select.html(options.html);
select.val(options.value);
// This updates the select but I lose styling
// select.selectmenu().selectmenu('refresh', true);
// This fails
select.selectmenu('refresh', true);
});
答案 0 :(得分:1)
不要使用.pageSelect
作为选择器,因为jQM将使用此样式创建其他元素。当你这样做
'select = $ .mobile.activePage.find('。pageSelect');
select.html(options.html);
select.val(options.value);'
你在两个元素中插入html代码,select和渲染对象,因此你失去了样式。
试试这个:
$.mobile.activePage.find('select[class=pageSelect]').html(options.html).select('refresh');
http://jsfiddle.net/cjindustries/0cmg8vvt/
另外,如果您从jQM开始,请考虑转到v1.4。