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文件的每个“签名”部分的name属性在下拉菜单中显示为一个选项。

任何？非常感谢

非常感谢！

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

从XML文件jquery填充下拉菜单

1 个答案: