Question

我今天遇到创建下拉列表的问题：

我有像这样的结构的xml文件：

<resultset>
  <row>
    <field name="iso3166_2">AF</field>
    <field name="country">AFGHANISTAN</field>
    <field name="fixed">1.000</field>
    <field name="mobile">1.300</field>
  </row>
  <row>
    <field name="iso3166_2">US</field>
    <field name="country">ALASKA</field>
    <field name="fixed">0.100</field>
    <field name="mobile">0.100</field>
  </row>
</resultset>

我想创建一个包含国家/地区名称的下拉列表（取自这些字段：<field name="country">...</field>）。

此外，在从此下拉列表中选择国家/地区后，我希望显示来自fixed和mobile的变量来自同一row集中的变量country跨度的：

<span id="mobile"></span>和<span id="fixed"></span>

我希望很清楚我想要实现的目标，我试图用类似问题的答案来解决它：dynamic load data from xml to drop down box with jquery但它对我不起作用（我认为我做错了）。请帮忙！

Answer 1

这样的事情应该有效：

$.ajax({
    url: 'img/test.xml',
    dataType: 'xml', // Make sure it knows to treat it as XML
    success: function(xml) {
        var rows = xml.childNodes[0].getElementsByTagName("row"),
            // This assumes your <select> has id of "countries"
            $dropdown = $("#countries");

        $(rows).each(function(index, row) {
            var fields = row.getElementsByTagName("field"),
                $option = $(document.createElement("option"));

            $(fields).each(function(index, field) {
                var name = field.getAttribute("name"),
                    // A special way to get the text contents of an XML node
                    value = $(field).contents()[0].wholeText;

                // If it's the "country" field, just stick it in the option
                if (name == "country") {
                    $option.text(value);
                } else {
                    // If it's anything else, store it as extra data
                    $option.data(name, value);
                }
            });

            $dropdown.append($option);
        });

        // Whenever you change which option is selected
        $dropdown.change(function() {
            $option = $dropdown.find(":selected");

            // Fill in the spans using the extra data you saved
            $("#fixed").text($option.data("fixed"));
            $("#mobile").text($option.data("mobile"));
        });
    }
});

简而言之，如果您通过AJAX提取XML，请确保将其视为XML，然后您可以将其视为任何其他类型的文档（有一些警告）。显然，这可以使用vanilla JavaScript完成，但我发现使用jQuery更容易。

从xml动态创建下拉列表

1 个答案: