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 “used the newest jquery mobile.js and now everything works perfectly”.
This seemed to be a compatibility problem.
Changed:
to: