從XML文件填充下拉菜單jquery

Question

我想從XML文件填充下拉菜單選項。 我在Stackoverflow上搜索過，但我找到的解決方案無法正常工作。這裏是我的jQuery代碼：

<script type="text/javascript"> 
$(function() { 
    $.ajax({ 
     type: "GET", 
     url: "signatures.xml", 
     dataType: "xml", 
     success: parseXml 
    }); 

    function parseXml(xml) { 
     var select = $('#Bname'); 
      $(xml).find('Signature').each(function(){ 
       var title = $(this).find($(this).name).text(); 
       select.append(""+title+""); 
      }); 
      select.children(":first").text("Please make a selection").attr("selected",true); 

     $("#Bname").on("change", function() { 
      var filter = $(this).find(":selected").text(); 
      var $node = $(xml).find("Signature[name='" + filter + "']"); 
      $("#nom").val($node.find("Nom").text()); 
      $("#titre-1").val($node.find("PG-Ligne1").text()); 
      $("#titre-2").val($node.find("PG-Ligne2").text()); 
      $("#titre-3").val($node.find("PG-Ligne3").text()); 
      $("#titre-4").val($node.find("PG-Ligne4").text()); 
      $("#ligne1").val($node.find("PD-Ligne1").text()); 
      $("#ligne2").val($node.find("PD-Ligne2").text()); 
      $("#ligne3").val($node.find("PD-Ligne3").text()); 
      $("#ligne4").val($node.find("PD-Ligne4").text()); 
      $("#ligne5").val($node.find("PD-Ligne5").text()); 
      $("#ligne6").val($node.find("PD-Ligne6").text()); 
      $("#ligne7").val($node.find("PD-Ligne7").text()); 

     }); 
    } 

}); 

</script> 

這是我的XML文件的樣本：

<?xml version="1.0" encoding="utf-8" ?> 
<SignaturesNovatech> 
    <Signature name="M-A L"> 
    <Nom>asd</Nom> 
    <PG-Ligne1>Representative</PG-Ligne1> 
    <PG-Ligne2>Cleaner</PG-Ligne2> 
    <PG-Ligne3>3223 Metro street</PG-Ligne3> 
    <PG-Ligne4>1-438-234-4453</PG-Ligne4> 
    <PD-Ligne1>www.website.com</PD-Ligne1> 
    <PD-Ligne2>mal@website.com</PD-Ligne2> 
    <PD-Ligne3>City here</PD-Ligne3> 
    <PD-Ligne4>Postal code</PD-Ligne4> 
    <PD-Ligne5>Services available</PD-Ligne5> 
    <PD-Ligne6>Graphic</PD-Ligne6> 
    </Signature> 
<Signature name="Alain P"> 
    <Nom>asd</Nom> 
    <PG-Ligne1>Representative</PG-Ligne1> 
    <PG-Ligne2>Cleaner</PG-Ligne2> 
    <PG-Ligne3>3223 Metro street</PG-Ligne3> 
    <PG-Ligne4>1-438-234-4453</PG-Ligne4> 
    <PD-Ligne1>www.website.com</PD-Ligne1> 
    <PD-Ligne2>mal@website.com</PD-Ligne2> 
    <PD-Ligne3>City here</PD-Ligne3> 
    <PD-Ligne4>Postal code</PD-Ligne4> 
    <PD-Ligne5>Services available</PD-Ligne5> 
    <PD-Ligne6>None</PD-Ligne6> 
    </Signature> 
</SignaturesNovatech> 

我不明白我在做什麼錯在這裏。我希望XML文件的每個「簽名」部分的名稱屬性在下拉菜單中顯示爲一個選項。

有人嗎？非常感謝

非常感謝！

Answer 1

第一個問題是您應該使用attr()來獲取節點的屬性。 find()用於檢索子元素。其次，將項目添加到select時，必須將它們添加爲option元素 - 不只是字符串值。試試這個：

function parseXml(xml) { 
    var $select = $('#Bname'); 

    $('<option />', { text: 'Please make a selection' }).appendTo($select); 

    $(xml).find('Signature').each(function(){ 
     var title = $(this).attr('name'); 
     $('<option />', { text: title, value: title }).appendTo($select); 
    }); 

    $select.on("change", function() { 
     var filter = $(this).val(); 
     var $node = $(xml).find("Signature[name='" + filter + "']"); 

     $("#nom").val($node.find("Nom").text()); 
     $("#titre-1").val($node.find("PG-Ligne1").text()); 
     $("#titre-2").val($node.find("PG-Ligne2").text()); 
     $("#titre-3").val($node.find("PG-Ligne3").text()); 
     $("#titre-4").val($node.find("PG-Ligne4").text()); 
     $("#ligne1").val($node.find("PD-Ligne1").text()); 
     $("#ligne2").val($node.find("PD-Ligne2").text()); 
     $("#ligne3").val($node.find("PD-Ligne3").text()); 
     $("#ligne4").val($node.find("PD-Ligne4").text()); 
     $("#ligne5").val($node.find("PD-Ligne5").text()); 
     $("#ligne6").val($node.find("PD-Ligne6").text()); 
     $("#ligne7").val($node.find("PD-Ligne7").text()); 
    }); 
}