Javascript 从xml动态创建下拉列表

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

我有这样的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>

空军
阿富汗
1
1.300
美国
阿拉斯加州
0.100
0.100

我想创建一个包含国家名称的下拉列表（取自这些字段：

…

）

此外，在从该下拉列表中选择国家后，我想在这样的跨度中显示

固定

和

移动

同一

行

设置为所选的

国家

的变量：

和中的

---

我希望我想要达到的目标是明确的，我试图用类似问题的答案来解决这个问题：但这对我不起作用（我想我做错了什么）。请帮忙

像这样的方法应该会奏效：

$.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({
url:'img/test.xml'，
数据类型：“xml”，//确保它知道如何将其视为xml
成功：函数（xml）{
var rows=xml.childNodes[0]。getElementsByTagName（“行”），
//这假设您的id为“国家”
$下拉=$（“#国家”）；
$（行）。每个（函数）（索引，行）{
var fields=row.getElementsByTagName（“字段”），
$option=$（document.createElement（“option”）；
$（字段）。每个（函数（索引，字段）{
var name=field.getAttribute（“名称”），
//获取XML节点的文本内容的特殊方法
值=$（字段）.contents（）[0]。wholeText；
//如果是“国家”字段，只需将其插入选项中即可
如果（名称=“国家”）{
$option.text（值）；
}否则{
//如果是其他内容，请将其存储为额外数据
$option.data（名称、值）；
}
});
$dropdown.append（$option）；
});
//无论何时更改所选的选项
$dropdown.change（函数（）{
$option=$dropdown.find（“：selected”）；
//使用保存的额外数据填写跨距
$（“#固定”）.text（$option.data（“固定”）；
$（“#mobile”）.text（$option.data（“mobile”）；
});
}
});

简言之，如果您通过AJAX导入XML，请确保它被视为XML，然后您可以像对待任何其他类型的文档一样对待它（有一些注意事项）。显然，这可以通过香草JavaScript实现，但我发现使用jQuery更容易实现