Анализ XML в нескольких полях формы с использованием JQuery

Question

Что я хочу сделать: i) Разбирать XML-данные в поле опций выбора. Ii) когда пользователь делает выбор с помощью поля опции, тогда еще много полей формы заполняются соответствующими XML-данными основанный на выборе пользователя.

У меня это работает с Adobe Spry (что я слышу, что вы плачете !!!) - В настоящее время пользователь выбирает окно выбора, которое содержит данные из XML, например «American Wigeon», который при выборе затем заполняет другие поля формы с остальной частью XML, такие как «Turdus migratorius» и так далее. Если пользователь меняет свое мнение и выбирает другого, например «American Robin», соответствующий 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, так что я могу начать добавлять больше функциональных возможностей к скрипт.

Любая помощь будет действительно оценена.

Большое спасибо

Все

EDIT Дата:

Мне нравится сценарий, написанный Charlietfi и испытал это на jsFiddle (большое спасибо) - я сейчас возникли проблемы Добавляя дополнительные XML-данные для формирования полей. Например, если я выбираю American Wigeon, то я хочу добавить дополнительные XML-данные в поля FORM, которые затем могут быть отправлены (так что значение «Rare» будет переведено в текстовое поле »)

Я могу получить образец текста в поле формы, но не может получить выбранные данные Additonal 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);  
    }) 

при выполнении сценария, я выбираю птицу от варианта, это то выводит окно предупреждения, как и ожидалось PLUS, вставленный в текстовое поле, - «Больше текста» (используется, чтобы убедиться, что что-то добавлено).

Я застрял на том, как использовать «+ data.id + "и получите это в # test2 Большое спасибо за помощь и извинения, если это такая простая вещь, что мне не хватает.

Answer 1

После динамически разбора XML, создавая как параметр и объект данных, которые будут храниться на выбора элемента с помощью JQuery данные()

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);  
}) 

DEMO: 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... 
});