Question

您好我已经动态创建了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);
});

任何帮助都将受到高度赞赏。

Answer 1

尽管@ TCHdvlp的答案非常准确，但我觉得使用DOM ready（或）它的等效$(function() {...})有点打败了具有jQuery Mobile优势的“页面事件”的目的。原因是因为这些jQM事件比dom ready更早发生，因此使用本机jqm事件比ready更快。

就您的问题而言，只需使用ready代替pageinit ，即可在没有pageshow的情况下实现此目的。 Pageinit只会触发一次，因此您的选项不会被重置。更多信息 here

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

Here's a demo

我在演示中改变了什么：

将pageshow更改为pageinit
将onDOMReady选项更改为wrapInBody（在您选择jQuery的位置旁边） - 您必须始终在<head/>中jquery，jquery mobile以及<body/>中的其余JS文件}

And here's a better way of appending select 我在这个演示中改变了什么：

将selectmenu附加到HTML的更好方法 - 这更快更干净

Answer 2

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

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

替换

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

通过

$(function(){

动态创建的Selectmenu选项使用第一个值覆盖所选选项

2 个答案: