JQuery Mobile：使用 javascript 更新选择
我正在尝试在phonegap/JQM 应用程序中使用javascript 更改选择值。 我按照建议在更改其值后调用 .selectmenu('refresh') ；它收到此错误：
未捕获无法在初始化之前调用 selectmenu 上的方法；尝试调用方法“刷新”
如果我删除该调用，选择上的 .val() 将更改，但屏幕上的图形不会更改。 .selectmenu("refresh") 旨在将图形与选择的 .val() 同步。
以下是我尝试利用的两个资源： http://jquerymobile.com/demos/1.0a3/#docs /forms/plugin-eventsmethods.html http://jquerymobile.com/test/docs/forms/forms-selects.html
我是新的phonegap 和JQM。
以下是尝试每三秒翻转一次选择的示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Demo Error</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
for (i=1;i<10;i++) {
setTimeout('changeProduct()',i*3000);
}
}
function changeProduct()
{
if ($("#product").val() == 'S')
{
$("#product").val('M');
}
else
{
$("#product").val('S');
}
console.log("calling selectmenu refesh change to " + $("#product").val());
$("#product").selectmenu('refresh', true);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
}
</script>
<link rel="stylesheet" href="jquery.mobile-1.0a3.css" />
<link rel="stylesheet" href="quote.css" />
<script src="jquery-1.5.min.js"></script>
<script src="jquery.mobile-1.0a3.js"></script>
</head>
<body onload="onBodyLoad()">
<div id="page1" data-role="page">
<div data-role="content">
<div id="product-all" data-role="fieldcontain">
<label for="product">Product:</label>
<select data-role="slider" name="product" id="product" value="S">
<option id="one" value="S">Single</option>
<option id="two" value="M" selected="selected">Multi</option>
</select>
</div>
</div>
</div>
</body>
</html>
I am trying change a select value with javascript in a phonegap/JQM application.
I followed the recommendation to call .selectmenu('refresh') after I changed its value; It get this error:
Uncaught cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh'
If I remove that call the .val() on the select will change, but the graphic on the screen will not change. The .selectmenu("refresh") is intended to synchronize the graphic with the .val() of the select.
Here are two of the resources I am attempting to make use of:
http://jquerymobile.com/demos/1.0a3/#docs/forms/plugin-eventsmethods.html
http://jquerymobile.com/test/docs/forms/forms-selects.html
I am new phonegap and JQM.
Here is sample code that attempts to flips the select every three seconds:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Demo Error</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
for (i=1;i<10;i++) {
setTimeout('changeProduct()',i*3000);
}
}
function changeProduct()
{
if ($("#product").val() == 'S')
{
$("#product").val('M');
}
else
{
$("#product").val('S');
}
console.log("calling selectmenu refesh change to " + $("#product").val());
$("#product").selectmenu('refresh', true);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
}
</script>
<link rel="stylesheet" href="jquery.mobile-1.0a3.css" />
<link rel="stylesheet" href="quote.css" />
<script src="jquery-1.5.min.js"></script>
<script src="jquery.mobile-1.0a3.js"></script>
</head>
<body onload="onBodyLoad()">
<div id="page1" data-role="page">
<div data-role="content">
<div id="product-all" data-role="fieldcontain">
<label for="product">Product:</label>
<select data-role="slider" name="product" id="product" value="S">
<option id="one" value="S">Single</option>
<option id="two" value="M" selected="selected">Multi</option>
</select>
</div>
</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我想通了：
当你想使用javascript更改 data-role=slider 的值时，更改该值后，请调用： $('#mysliderid').slider('refresh');
当您想使用 javascript 更改 data-role=select 的值时，更改值后，请调用： $("#myselectid").selectmenu('refresh', true);
这可能会令人困惑，因为它们在内部都使用 select，所以人们可能会被误导，认为 selectmenu 对两者都适用。
I figured it out:
When you want to change a value of a data-role=slider using javascript, after you change the value, call : $('#mysliderid').slider('refresh');
When you want to change a value of a data-role=select using javascript, after you change the value, call : $("#myselectid").selectmenu('refresh', true);
This can be confusing because internally they both use select so one might be misled into thinking that selectmenu would work for both.
对我来说，在 JQM 1.4 上，摆脱以下问题的唯一方法：
“无法在初始化之前调用 selectmenu 上的方法；尝试调用方法“刷新””
是使用 data-role="fieldcontain" 在我的切换器周围创建一个包装器父级，然后在调用我的切换器的 之前调用该元素的 .trigger("create") >.slider("refresh")
换句话说，我从这个： 更改
为：
另请注意，在使用 JQM1.4 时，使用 .slider() 访问切换器的 API，而不是.selectmenu()
For me, on JQM 1.4, the only way to get rid of:
"Cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh' "
was to create a wrapper parent around my toggler with data-role="fieldcontain" then, call that element's .trigger("create") just before calling my toggler's .slider("refresh")
In other words, I changed from this:
to this:
Also note, when working with JQM1.4 a toggler's API is accessed with .slider(), not .selectmenu()