0

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

我已经与Adobe Spry一起工作（我听到您哭泣的是什么！！！） - 当前，用户选择一个包含XML数据的选项框，例如“ American Wigeon”其余的 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 非常感谢每个人的帮助和道歉，如果这是一件我错过的简单事情。

4

2 回答 2

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/

于 2012-06-06T03:31:35.193 回答
0

我假设您正在使用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...
});
于 2012-06-06T02:26:56.877 回答