0

こんにちは、ドロップダウンを正しく設定する selectmenu オプションを動的に作成しました。私の問題は、ドロップダウンのリストからオプション（値）を選択すると、値がリストの最初の値で上書きされることです。

このフィドルを参照して問題を理解してくださいhttp://jsfiddle.net/praleedsuvarna/SwLNG/

以前の投稿のいくつかを参照しましたが、どれもあまり役に立ちませんでした.

以下は参考用のhtmlコードです

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
<div data-role="page" id="checkout">
        <div data-id="commonHeader" data-role="header" data-position="fixed">
            <a href="#" rel="external" data-direction="reverse" data-rel="back" data-icon="back">Back</a>
            <h1>Checkout</h1>
        </div>
        <div data-role="content">
            <label for="state_o">State:</label>
            <select name="state_o" id="state_o" data-native-menu="false">
            </select>
        </div>
  <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>   
</body>
</html>

以下はJavaスクリプトです

$(document).on('pageshow', '#checkout', function(){  
    var stateList = "";
    stateList = stateList + '<option value="Maharashtra">Maharashtra</option>';
    stateList = stateList + '<option value="AP">AP</option>';
    stateList = stateList + '<option value="MP">MP</option>';
    stateList = stateList + '<option value="Delhi">Delhi</option>';
    stateList = stateList + '<option value="Goa">Goa</option>';
    stateList = stateList + '<option value="Karnataka">Karnataka</option>';
    stateList = stateList + '<option value="Gujarat">Gujrat</option>';
    stateList = stateList + '<option value="Assam">Assam</option>';
    stateList = stateList + '<option value="Bihar">Bihar</option>';
    stateList = stateList + '<option value="Haryana">Haryana</option>';
    stateList = stateList + '<option value="J&K">J&K</option>';
    stateList = stateList + '<option value="Kerala">Kerala</option>';
    stateList = stateList + '<option value="Odisha">Odisha</option>';
    $("#state_o").html(stateList);
    $("#state_o").selectmenu("refresh", true);
});

どんな助けでも大歓迎です。

4

2 に答える 2

2

@TCHdvlpの答えは非常に正確ですが、jQuery Mobileの強みである「ページイベント」を使用するという目的をDOM ready（または）それに相当するものを使用すると、少し無効になるように感じます。$(function() {...})その理由は、これらの jQM イベントは よりもはるかに早く発生dom readyするため、ネイティブ jqm イベントを使用すると よりも高速になりreadyます。

質問に関する限り、の代わりに使用するだけでこれを達成できますreadypageinitpageshow。Pageinit は 1 回だけ実行されるため、オプションはリセットされません。より詳しい情報here

$(document).on("pageinit", "#page1", function () {
    /*populate select here*/
});

Here's a demo

デモで変更したこと:

  1. pageshowに変更pageinit
  2. onDOMReadyオプションをwrapInBody(jQuery を選択する場所の隣) に変更しました - 常に jquery、jquery mobile を<head/>使用し、残りの JS ファイルを使用する必要があります。<body/>

And here's a better way of appending select このデモで変更したこと:

  1. HTMLに追加selectmenuするためのより良い方法 - これはより高速でクリーンです
于 2013-06-14T15:25:57.517 に答える
0

選択で何かを選択すると、UI は自動的に前のページに戻り、'pageShow イベント' をトリガーします。そのため、リストがリセットされます。

たとえば、すでに「onDomReady」部分にいるので、イベント ハンドラーを置き換えることができます。

交換

$(document).on('pageshow', '#checkout', function(){

に

$(function(){
于 2013-06-14T13:13:35.927 に答える