动态地将数据放入选择选项droplist（jQuery）(Dynamically put data into select option droplist (jQuery))

动态地将数据放入选择选项droplist（jQuery）(Dynamically put data into select option droplist (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>

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

但是当我包含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>

Here is the code: This is were I take data from XML (this works, already tested it without 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>

An this is my select option (HTML):

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

Now the weird thing, when I include this jQuery script:

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

Then the droplist got awesome look, but does not contain any information. When I comment out that line, the droplist looks normal, but now it DOES contain the information (so this is the prove, that it does work).

But why doesn't it work when I include the jQuery line? I can't find the problem.

(see picture for maybe better explanation)

EDIT: all includes that I use:

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

最满意答案

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

OP "used the newest jquery mobile.js and now everything works perfectly".

This seemed to be a compatibility problem.

Changed:

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

to:

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