Javascript 如何解析存储XML数据的变量并动态打印数据？

假设我从如下格式的XML页面提取：

<people>
    <person>
        <name>Bob</name>
        <age>45</age>
        <hobby>Programming</hobby>
    </person>
    ....
</people>

以及一个动态填充数据变量名称的HTML下拉列表（选项将通过JavaScript在主体上使用onload调用添加。在页面加载之前，代码实际上不会包含选项标记，如下所示）：

如果从下拉列表中选择了一个新人，则会显示他们的信息。根据我已有的代码，如果向XML文档中添加了一个新人，他们将自动添加到下拉列表中，因此，如果选中，他们的信息应该能够自动显示，而无需添加任何其他代码

---

我更喜欢使用JavaScript而不是jQuery，因为这是我用来将XML文档数据读入JavaScript数据变量的方法。

我创建了一个新函数作为

填充下拉列表，并修改了
getInfo（）
函数以从XML文件检索数据。希望下面的代码有帮助：


var-xml=`
上下快速移动
45
程序设计
吉姆
40
学习
罗恩
50
跳舞
`;
var parser=新的DOMParser（）；
var responseXML=parser.parseFromString（xml，“text/xml”）；
var数据=responseXML；
populateDropdown（）；
函数getInfo（）{
var name=document.getElementById（“名称”）.value；
var people=data.getElementsByTagName（“人”）[0].childNodes；
为（人与人之间）{
if（人[person].innerHTML）{
变量personData={
名称：people[person].getElementsByTagName（“名称”）[0]。innerHTML，
年龄：人[person]。getElementsByTagName（“年龄”）[0]。innerHTML，
爱好：people[person]。getElementsByTagName（“爱好”）[0]。innerHTML，
}
if（personData.name==name）{
var infoDiv=document.getElementById（“info”）；
infoDiv.innerHTML=`Name:${personData.Name}
Age:${personData.Age}
Hobby:${personData.Hobby}`；
打破
}
}
}
}
函数populateDropdown（）{
var people=data.getElementsByTagName（“人”）[0].childNodes；
为（人与人之间）{
if（people[person].innerHTML）{
var select=document.getElementById（“名称”）；
var option=document.createElement（“选项”）；
option.value=people[person]。getElementsByTagName（“名称”）[0]。innerHTML；
option.innerHTML=people[person]。getElementsByTagName（“名称”）[0]。innerHTML，
选择.appendChild（选项）；
}
}
}

我认为这非常接近；但是，在getInfo（）函数中，您只能将var people分配给XML数据中的第一个人（Bob）。在这种情况下，吉姆和罗恩的信息无法从var人员那里获取。如何将每个人的数据分配给var people？否。
people
变量返回所有数据，包括Jim和Ron的数据。使用DOM解析器解析数据时，数据驻留在索引
0
中。这就是为什么我添加了
[0]
。
...
var data = responseXML;
...

<select id="names" onchange="getInfo()">
    <option value="Bob">Bob</option>
    <option value="Jim">Jim</option>
    <option value="Ron">Ron</option>
</select>

Name: Bob
Age: 45
Hobby: Golf