动态地将数据放入选择选项droplist(jQuery)

时间:2012-06-12 07:24:51

标签: javascript jquery android drop-down-menu

这是代码: 这是我从XML获取数据(这是有效的,已经在没有jQuery的情况下测试过了):

 <script>
        $(document).ready(function(){
            var select = $('#mySelect');

            $.ajax({
                type: "GET",
                url: "http://mobile.qmschrysant.nl/keuzemenu/keuzemenu.xml",
                dataType: "xml",
                success: function(xml) {
                $(xml).find('menuitem').each(function(){
                    var title = $(this).find('title').text();
                    select.append("<option/><option class='ddheader'>"+title+"</option>");
                        $(this).find('value').each(function(){
                        var value = $(this).text();
                        select.append("<option class='ddindent' value='"+ value +"'>"+value+"</option>");

                        });
                    });
                    select.children(":first").text("please make a selection").attr("selected",true);
                    select.trigger('updatelayout');
                }
            });
        });
     </script>

这是我的选择选项(HTML):

<label for="selectmenu" class="select">Kies planning:</label>
          <form>
            <select id="mySelect" >

                <option>loading</option>
            </select>
          </form>

现在奇怪的是,当我包含这个jQuery脚本时:

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

然后,droplist看起来很棒,但不包含任何信息 当我注释掉那一行时,droplist看起来很正常,但现在它包含了信息(所以这是证明,它确实有用)。

但是当我包含jQuery行时,为什么它不起作用?我找不到问题。

(见图片可能更好的解释) enter image description here

编辑: 所有包括我使用的:

<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

3 个答案:

答案 0 :(得分:1)

你有两次导入jquery:

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

删除最旧的(第二行)。

或者,更好的是,将这两行替换为:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

(在包含jquery mobile之前)

所以:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>

答案 1 :(得分:1)

OP“使用了最新的jquery mobile.js,现在一切都运行良好”。

这似乎是兼容性问题。

更改:

<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css">

为:

<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>
<link href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" rel="stylesheet" type="text/css">

答案 2 :(得分:0)

对我来说没有意义:(

第一个脚本需要jQuery才能工作,所以你需要包含jQuery。

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

行不会改变droplist外观。