0

Hi I have dynamically created selectmenu options that populates the drop down correctly. My problem is, on selecting any option(value) from the list of drop down, the value gets overriden with the first value from the list.

Kindly refer this fiddle to understand the problem http://jsfiddle.net/praleedsuvarna/SwLNG/

I had refered to few of the earlier post, but non of them was of much help.

Below is the html code for your reference

<!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>

Following is the java script

$(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);
});

Any help would be highly appreciated.

4

2 回答 2

2

Even though @TCHdvlp's answer is extremely accurate, I feel like using DOM ready (or) its equivalent $(function() {...}) kinda defeats the purpose of having the "page events" which are jQuery Mobile's strengths. The reason is because these jQM events fire much earlier than dom ready so using the native jqm events are faster than ready.

As far as you question is concerned, you could achieve this without ready by just using pageinit instead of pageshow. Pageinit will fire only once so your options wont be reset. More info here

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

Here's a demo

What I've changed in the demo :

  1. Changed pageshow to pageinit
  2. Changed onDOMReady option to wrapInBody (next to where you select jQuery) - you must always jquery, jquery mobile in <head/> and the rest of your JS files in <body/>

And here's a better way of appending select What I've changed in this demo :

  1. A better way to append selectmenu to HTML - this is faster and cleaner
于 2013-06-14T15:25:57.517 回答
0

当您在选择中选择了某些内容时，UI 会自动返回上一页，触发“pageShow 事件”。这就是您的列表被重置的原因。

例如，您可以替换您的事件处理程序，因为您已经在“onDomReady”部分。

代替

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

经过

$(function(){
于 2013-06-14T13:13:35.927 回答