2

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

我有这样的结构的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"><!-- mobile value --></span>并且在<span id="fixed"><!-- fixed value --></span>

我希望很清楚我想要实现什么，我试图用类似问题的答案来解决它：从 xml 动态加载数据到带有 jquery 的下拉框，但它对我不起作用（我想我做错了什么）。请帮忙！

4

1 回答 1

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 更容易。

于 2012-12-06T21:29:07.520 回答