使用 Jquery 将 XML 解析为多个表单字段

Question

我想要做什么：i) 将 XML 数据解析为一个选择选项字段 ii) 当用户使用选项框进行选择时，更多的表单字段会根据用户的选择填充相关的 XML 数据。

我有这个与Adobe Spry一起使用（我听到你的哭了！字段与 XML 的其余部分，例如“Turdus migratorius”等。如果用户改变主意并选择另一个，例如“美国罗宾”，则该鸟的相关 XML 将填充表单字段。

我在这里找到了将解析数据放入选择选项的答案，但无法解决下一个使用多个字段的问题。

我的 XML 文件看起来像这样（编辑为两个条目，但通常大约 300 个）：

<?xml version="1.0" encoding="utf-8" ?>
<BIRD>

<Result>
<name>American Wigeon</name>
<latin>Anas americana</latin>
<rare>1</rare>
<id>68</id>
<breed>0</breed>
<winter>0</winter>
</Result>

<Result>
<name>American Robin</name>
<latin>Turdus migratorius</latin>
<rare>1</rare>
<id>255</id>
<breed>0</breed>
<winter>0</winter>

</BIRD>

我想让它在 jQuery 中工作，这样我就可以开始向脚本添加更多功能。

任何帮助将不胜感激。

非常感谢

标记

编辑更新日期：

我喜欢 Charlietfi 编写的脚本，并在 jsFiddle 上对此进行了测试（非常感谢）——我现在在将额外的 XML 数据附加到表单字段时遇到问题。例如，如果我选择 American Wigeon，然后我想将额外的 XML 数据放入 FORM 字段中，然后可以提交（因此“Rare”的值将进入文本字段”）

我可以在表单字段中获取示例文本，但无法在以下代码示例中获取选定的附加 XML 数据：

var xml = '<?xml version="1.0" encoding="utf-8" ?><BIRD><Result><name>American 
Wigeon</name><latin>Anas americana</latin><rare>1</rare><id>68</id><breed>0</breed>
<winter>0</winter></Result><Result><name>American Robin</name><latin>Turdus 
migratorius</latin><rare>1</rare><id>255</id><breed>0</breed><winter>0</winter>
</Result></BIRD>';

var $xml = $($.parseXML(xml));

$xml.find('Result').each(function() {
var data={}
$(this).children().each(function() {
    data[this.tagName]=$(this).text();
})
                                                                                              $('#test').data( data.id,  data).append('<option                                                                           value="'+data.id+'">'+data.name+'</option>');
  });


 $('#test').change(function(){
var data=$(this).data( $(this).val());   

var input = $( "#test2" ); // **this being the name of my text field**
 input.val( input.val() + "more text" );



    alert('ID:'+data.id +', Name:'+ data.name);    
  })

当脚本运行时，我从选项中选择一只鸟，然后按预期弹出一个警告框，插入文本字段的加号是“更多文本”（用于确保添加某些内容）。

我不知道如何使用“+data.id +”并将其放入#test2 非常感谢大家的帮助和道歉，如果这是一件我想念的简单事情。

Answer 1

以下将动态解析 XML，创建一个选项和一个数据对象，这些对象将使用 jQuery data() 存储在选择元素上

var $xml = $($.parseXML(xml));

$xml.find('Result').each(function() {
    var data={};
    /* loop over children of each "Result to create data object*/
    $(this).children().each(function() {
        data[this.tagName]=$(this).text();
    });
    /* add data to select and create option*/
    $('#test').data( data.id , data).append('<option value="'+data.id+'">'+data.name+'</option>');
});

/* change handler for select*/
$('#test').change(function(){
    var data=$(this).data( $(this).val()); 
    /* here you would make updates to other fields */   
     alert('ID:'+data.id +', Name:'+ data.name);    
})

演示：http://jsfiddle.net/dpK7x/1/

Answer 2

我假设您正在使用jQuery.parseXML() 进行实际解析。然后您可以执行以下操作（当然将其包装在 DOMReady 函数中）：

var xmlDoc = $.parseXML(yourXML),
$xml = $( xmlDoc );

$xml.find('Result').each(function () {
    $this = $(this); // $this is now the <Result> node
    // Assuming you populating a <select> list
    var newOption = $('<option/>').text($this.find('name').text()).val($this.find('name').text());
    // Populate the additional data that we'll be able to use elsewhere
    newOption.data('latin', $this.find('latin').text());
    newOption.data('rare', $this.find('rare').text());
    // etc...

    // Add the newOption to your existing <select> element
    $('#mySelectList').append(newOption);
});

// Then later on we can deal with the <option> being selected
$('#mySelectList').on('change', function() {
    $selected = $(this).find('option:selected');
    // Do whatever you need to do with the data... Update HTML, populate form fields etc.
    console.log('name', $selected.text());
    console.log('latin', $selected.data('latin');
    console.log('rare', $selected.data('rare');
    // etc...
});