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

嗨，我已经动态创建了正确填充下拉菜单的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);
});

尽管@TCHdvlp的答案非常准确，但我觉得使用DOM ready(或)它的等效$(function() {...})有点违背了拥有"页面事件"的目的，而这是jQuery Mobile的优势。原因是这些jQM事件比dom ready更早触发，所以使用本机jQM事件比ready更快。

就您的问题而言，您可以通过使用pageinit而不是pageshow来实现没有ready的。Pageinit只会触发一次，所以你的选项不会被重置。更多信息在这里

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

这是一个演示

我在演示中做了什么改变:

将pageshow更改为pageinit
将onDOMReady选项更改为wrapInBody(在您选择jQuery的旁边)-您必须始终在<head/>中使用jQuery, jQuery mobile，其余的JS文件在<body/>

这里有一个更好的方法来附加select我在这个演示中做了什么改变:

一个更好的方式附加selectmenu到HTML -这是更快，更干净

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

例如，你可以替换你的事件处理程序，因为你已经在"onDomReady"部分了。

代替

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

$(function(){

相关内容

最新更新

热门标签：