Jquery를 사용하여 XML을 여러 양식 필드로 구문 분석

Question

원하는 작업 : i) XML 데이터를 선택 옵션 필드로 구문 분석 ii) 사용자가 옵션 상자를 사용하여 선택하면 더 많은 양식 필드에 관련 XML 데이터가 채워집니다 사용자 선택에 따라

나는 어도비 Spry와 함께 작업하고있다. (울부 짖는 소리는 뭐야?) - 현재 사용자는 XML의 데이터가 포함 된 옵션 상자를 선택합니다 (예 : "American Wigeon"). "Turdus migratorius"등과 같이 나머지 XML과 필드를 형성합니다. 사용자가 마음을 바꾸고 다른 단어 (예 : "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를 작동하려면이 옵션을 좀하고 싶습니다 스크립트.

도움이 될만한 의견이 있습니다.

많은 감사

마크

편집 최신 : 나는 (많은 감사를) Charlietfi에 의해 작성된 스크립트를 좋아하고 jsFiddle에서이를 테스트 한

- 지금 데 데 문제를 추가 필드를 형성하기위한 추가 XML 데이터. 예를 들어, American Wigeon을 선택한 경우 추가 XML 데이터를 FORM 필드에 입력하여 제출할 수 있습니다 ("희귀"값이 텍스트 필드에 입력 됨).

양식 필드에 샘플 텍스트를 가져하지만 선택된위한 추가적인 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을 구문 분석 후 : 그럼 당신은 다음과 같은 작업을 수행 할 수 있습니다 (물론 DOMReady 기능에 포장) 데이터()

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()을 사용하고 있다고 가정합니다. jQuery를 사용하여 선택 요소에 저장됩니다 옵션을 선택하고 데이터 개체를 모두 생성,

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