Javascript 动态地将数据放入选择选项下拉列表（jQuery）

代码如下： 这是我从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>

然后，水滴列表看起来很棒，但不包含任何信息。 当我注释掉这一行时，水滴列表看起来很正常，但现在它确实包含了信息，所以这是证明，它确实有效

但是当我包含jQuery行时，为什么它不起作用呢？我找不到问题

请参阅图片以了解更好的解释

编辑： 我使用的所有内容包括：

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

---

这对我来说毫无意义：

第一个脚本需要jQuery才能工作，因此您已经包含了jQuery

和

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

---

行不会更改droplist外观。

您有两倍于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之前

因此：

---

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

致：

---

@我使用IE，Operamy主浏览器和Firefox，电脑上没有chrome。但是firefox也有控制台opera的选项，我会看的。很好。很抱歉，我删除了我的评论，其中我要求您检查跨域问题，并查看Chrome开发者工具网络选项卡，以查看xml文件是否得到了良好的接收。@我在Firefox的控制台中查看，是的，他找到了xml文件。当我尝试您的代码时，我得到了一个跨域错误。只有当mobile.qmschrysant.nl接受跨域请求或html页面来自同一域时，您的代码才能工作。@不应该是这样。我没有收到跨域错误，请注意这不是wole代码，顺便说一句，html和xml文件都在同一目录中。如果没有jQuery行，它确实可以完美地工作。现在也要安装chrome了，我认为这就是为什么没有进行ajax查询的原因。但是可能有两个jquery包含和一个不兼容。我稍微编辑了一下这个问题，下面你可以看到我包含了什么。代码继续工作可能是因为我还包括了jquery/mobile，它是专为移动应用而设计的网站。我尝试了你的上一个答案，但它不起作用，但是，当我替换为它时，它只在外观正常的droplist布局下起作用，所以新的jquery可能有某种缺陷？我知道它在没有UI的情况下可以工作：。我只是对XML文件进行了硬编码，以避免跨域问题。。我使用了最新的jquery mobile.js，现在一切都运行得很好，可能是过时的jquery包含了bug什么的。但是谢谢你的帮助！不客气。请看一下介绍？我大部分时间都用它来引入问题，否则我会这样说/问：这是我的代码，去修复它，所以简而言之，它看起来更友好，但我不介意你删除/更改它，继续：。

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