Populate dropdown menu from an XML file jquery

Question

I'm trying to populate a dropdown menu options from an XML file. I've searched on Stackoverflow, but the solutions I've found are not working. Here's my jQuery code :

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

Here's a sample of my XML file :

<?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>[email protected]</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>[email protected]</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>

I don't understand what I'm doing wrong here. I want the name attribute of each "Signature" section of the XML file to appear as an option in the dropdown menu.

Anyone? Thanks a lot

Thanks a lot!

Rory McCrossan · Accepted Answer · 2015-06-02 15:48:07Z

1

The first issue is that you should use attr() to get the attributes of the node. find() is used to retrieve child elements. Secondly, when adding items to a select they must be added as option elements - not just a string value. Try this:

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());
    });
}

edited Jun 2, 2015 at 15:48

answered Jun 2, 2015 at 15:40

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Danimp Over a year ago

Hi Rory, Thanks a lot. Seems to be almost working. It gives me a long list of blank options, except the "Please make a selection" one. Any idea why?

Rory McCrossan Over a year ago

Given you're parsing XML, try using attr() instead of prop(). I updated my answer for you.

Danimp Over a year ago

Awesome. It's working now. Thanks a lot! Everythings clearer now. Many thanks

Collectives™ on Stack Overflow

Populate dropdown menu from an XML file jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related