Динамически помещать данные в выберите опцию выпадающего списка (JQuery)

Question

Вот код: Это был я принимать данные из 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 выглядит нормально, но теперь он содержит информацию (так что это доказывает, что она работает).

Но почему это не работает, когда я включаю строку jQuery? Я не могу найти проблему.

(смотри рисунок для возможно лучшего объяснения)

EDIT: все включает в себя, что я использую:

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

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

Answer 2

Это делает нет смысла для меня :(

Первые потребности сценария jQuery для работы, поэтому вы включили jQuery.

И

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

линия не меняется вид с запятой.

Answer 3

У вас есть два раза импорт 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 мобильного)

Итак:

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