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選擇

回答

相關問題