1

我有一个 JSON 字符串。有了它，我必须填写下拉菜单。GroupBy 在 JavaScript 中对 JSON 数据进行分组并填充 optgroup我研究了这个问题并尝试了它。

 <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0 ,maximum-scale=1.0  ,minimum-scale=1 ,user-scalable=0" />
           <!--jQuery Mobile CSS-->
        <link rel="stylesheet" href="common/style/jquery/jquery.mobile-1.1.0.min.css" />
        <link type="text/css" href="common/style/jquery/jquery.mobile.fixedToolbar.polyfill.css" rel="stylesheet" />
        <link type="text/css" href="common/style/jquery/jquery.mobile.datebox.min.css" rel="stylesheet" /> 
        <link type="text/css" href="common/style/jquery/jquery.mobile.simpledialog.min.css" rel="stylesheet" /> 
        <link type="text/css" href="common/style/jquery/prettify.css" rel="stylesheet" />

        <!--Custom CSS-->
            <link rel="stylesheet" href="common/style/commonLayout.css"/>
        <link rel="stylesheet" href="common/style/mc-lib/mclib.css"/>
        <link rel="stylesheet" href="common/style/custom/custom.css"/>

        <!--jQuery Mobile JS-->
        <script type="text/javascript" src="common/js/jquery/jquery-1.7.2.js"></script>
        <script type="text/javascript" src="common/js/jquery/jquery.mobile-1.1.0.min.js"></script>
        <script type="text/javascript" src="common/js/jquery/jquery.mobile.fixedToolbar.polyfill.js"></script>
        <script type="text/javascript" src="common/js/jquery/jquery.mousewheel.min.js"></script>
        <script type="text/javascript" src="common/js/jquery/jquery.mobile.datebox.min.js"></script>
        <script type="text/javascript" src="common/js/jquery/jquery.mobile.simpledialog.min.js"></script>
        <script type="text/javascript" src="common/js/jquery/prettify.js"></script>

        <!--Custom JS-->
        <script type="text/javascript" src="common/js/Lib/spin.js"></script>
        <script type="text/javascript" src="common/js/Lib/iscroll.js"></script>
        <script type="text/javascript" src="common/js/Lib/MCLib.js"></script>

        <!--Hy5 JS-->
        <script type="text/javascript" src="common/js/hy5/hy5.js"></script>

        <script type="text/javascript" src="js/sample.js"></script> 

        </head>
    <body>
    <div data-role="page" data-theme="b" id="LoginScreen"  data-overlay-theme="c">  

        <div id="wrapper">
        <div id="scroller">


        <div data-role="content">

        <fieldset class="l1c1Panel"  data-role="controlgroup">
            <label for="product">Product</label>
            <select name="products" class="product" id="product">
            </select>

        </fieldset>

        </div>  
        </div>
        </div>  
    </div>
    </body>
    <script type='text/javascript'>

        var data = {
        "Category 1":[
            {"id": "210","name": "Name 1"},
            {"id": "187","name": "Name 2"},
            {"id": "186","name": "Name 3"},
            {"id": "185","name": "Name 4"},
            {"id": "184","name": "Name 5"},
            {"id": "183","name": "Name 6"},
            {"id": "182","name": "Name 7"}
        ],
        "Category 2":[
            { "id": "181","name": "Name 8"},
            {"id": "178","name": "Name 10"}
        ],
        "Category 3": [
            {"id": "180","name": "Name 9"}
        ]
    };

    var product = $('#product');
    $.each(data, function (key, cat) {
        var group = $('<optgroup>',{label:key});
        $.each(cat,function(i,item) {
            $("<option/>",{value:item.id,text:item.name})
                .appendTo(group);
        });
        group.appendTo( product );
    });

var pageScroller;
    $(document).on("pagebeforeshow",'#LoginScreen',function(event){
        pageScroller.refresh();

    });

    function makeScroll(){
        pageScroller=new iScroll('wrapper');
    }

    $(document).on("pagebeforecreate",'#LoginScreen',function(event){
        makeScroll();



    });        
    </script>
    </html>

如果我删除 iScroll 相关代码，下拉菜单工作正常。我无法找到问题所在。请帮我解决这个问题

4

0 回答 0