JQuery Mobile：更新使用javascript选择

我想在phonegap/JQM应用程序中用javascript更改选择值。我按照建议在改变它的值后调用.selectmenu（'refresh'）;它得到这个错误：JQuery Mobile：更新使用javascript选择

在初始化之前未被捕获的不能调用selectmenu上的方法;尝试调用方法'刷新'

如果我删除该调用，select上的.val（）将会更改，但屏幕上的图形不会更改。 .selectmenu（“刷新”）旨在将图形与select的.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>

来源

2011-03-20 Michael Potter

我刚刚发现我的代码会如果我从'data-role = slider'更改为'data-role = select'，则工作。所以现在我的问题是，如何更改/刷新滑块？ – 2011-03-20 13:48:52

相关：http://stackoverflow.com/questions/5249250/jqm-jquerymobile-dynamically-added-elements-not-displaying-correctly-and-css-is – 2011-03-23 19:45:23

我想通了：

当你想改变的数据角色值=使用滑块的JavaScript ，改变值后，调用：$（'＃mysliderid'）。slider（'refresh'）;如果你想改变一个data-role = select的值，使用javascript，改变这个值后，调用：$（“＃myselectid”）。selectmenu（'refresh'，true）;

这可能会令人困惑，因为它们在内部都使用select，所以可能会被误认为selectmenu适用于两者。

来源

2011-03-20 14:36:48

很高兴知道，感谢您的贡献。 +1 – naugtur 2011-03-21 08:51:10

非常感谢，它的荒谬，这是如此困难。 – Andrew 2012-04-10 00:11:56

谢谢，我遇到了同样的问题。我确实在文档中看到它：http://jquerymobile.com/demos/1.1.1/docs/forms/slider/methods.html – carillonator 2012-08-26 23:27:12

对于我来说，在JQM 1.4，只有这样，才能摆脱： “不能调用之前selectmenu到初始化方法，试图调用方法‘刷新’” 是建立在我的toggler包装父与数据角色=“fieldcontain”然后，调用该元素的.trigger（“创建”）只是叫我toggler的.slider（“刷新”）

换句话说之前，我从这个变化：

<select id='policy_toggler' data-role='slider'> 
    <option value="false">No</option> 
    <option value="true">Yes</option> 
</select> 

<script> 
$("#policy_toggler").selectmenu("refresh"); //rises prior-to-initialization error, nothing happens visually. 
</script>

这样：

<div class="prefparam" data-role="fieldcontain"> 
    <select id='policy_toggler' data-role='slider'> 
    <option value="false">No</option> 
    <option value="true">Sí</option> 
    </select> 
</div> 

<script> 
$(".prefparam").trigger("create"); 
$("#policy_toggler").slider("refresh"); //visual sync between real input element and visual ui element 
</script>

还要注意，与JQM1.4工作一个toggler的API与.slider（访问时），不.selectmenu（）

来源

2014-02-20 16:35:33 user3333698

JQuery Mobile：更新使用javascript选择

回答

相关问题