Заполнение выпадающего меню из файла 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()); 
    }); 
}