使用jQuery從AJAX調用循環XML兒童？

Question

我需要關於Ajax和jQuery的幫助。

我從Ajax調用收到此XML數據：

<data> 
<book title=「Book1」 bookID="1"> 
<AuthorsNum>3</AuthorsNum> 
<author> 
    <authorId>1</authorId> 
    <fName> Mark </fName> 
    <mName>null</mName> 
    <lName>White</lName> 
    <education>PHD</education> 
    <role>Writer</role>  
</author> 
<author> 
    <authorId>2</authorId> 
    <fName>Jhon</fName> 
    <mName>null</mName> 
    <lName>Brown</lName> 
    <education>PHD</education> 
    <role>Writer</role>  
</author> 
</book> 
<book title=「Book2」 bookID=「2」> 
<AuthorsNum>4</AuthorsNum> 
<author> 
    <authorId>1</authorId> 
    <fName> Mark </fName> 
    <mName>null</mName> 
    <lName>White</lName> 
    <education>PHD</education> 
    <role>Writer</role>  
</author> 
</book> 

我需要向下創建下降（選擇）菜單與圖書名稱和ID。然後，當每本書被選中時，我需要顯示作者姓名和教育。現在，我得到了下拉列表，但我無法弄清楚我是如何得到所選書籍的，並通過本書的所有作者循環顯示它們。

這裏是我做了什麼：

printAuthors = function(){ 
    $.ajax({ 
     type: "GET", 
     async: true, 
     cache: false, 
     url: url, 
     data: {path: "/mypath" }, 
     dataType: "xml", 
     success: function(data, status){ 

      var myContent = ""; 
      if($(data).find("error").length!=0){ 

      } 

      else{ 
       var selectElement = $("<select id='bookMenu' name='bookMenu' />"); 
       var content=""; 
       $("book", data).each(function() { 
        $("<option />", {value: $(this).attr('bookID') , text: $(this).attr('title') }).appendTo(selectElement); 

        var selectedOption = this.value; 
        $("author", $(data).find('book[bookID="' + selectedOption + '"]').children()).each(function() { 
         // get the name and education and append them to a #myDiv 
        }); 
       }); 

       $("#myDiv").html(selectElement) ; 


      } 
     } 

    }); 
} 

誰能幫助？是否有更好的方法來實現菜單和結果？

Answer 1

好了，所以它似乎很簡單：

1. 創建選擇選項後，您需要先退出循環。
2. 之後，在你的選擇上添加onchange事件（參考jquery onchange事件），這會給你選擇的選項。
3. 循環訪問xml並將您的值與數據進行比較，然後在div上添加相應的數據。

第二種方法：

1. 通過defautl追加整個數據在不同的div的並保持其顯示爲無
2. 比賽中選擇所選擇的值，並顯示其按您的要求
匹配div的何時使用 data-屬性

Answer 2

很好的例子，here是對屬性的另一個簡單的介紹。

$("book", data).each(function() { 

    //NOTE: this solution assumes names and edus are the same length. (every author has an education). 
    //add logic if not the case 
    var authors = ""; 
    var authors_edu = ""; 

    $(this).find('author').each(function() { 
     authors += $(this).find('fName').text() + " " + $(this).find('lName').text() + ", "; 
     authors_edu += $(this).find('education').text() + ", "; 
    }); 

    //remove trailing comma 
    if (authors.lastIndexOf(",") == authors.length - 2) { 
     authors = authors.substr(0, authors.length - 2); 
     authors_edu = authors_edu.substr(0, authors_edu.length - 2); 
    } 

    selectElement.append($("<option>").attr('value', $(this).attr('bookID')) 
     .text($(this).attr('title')) 
     .attr('data-auth-name', authors) 
     .attr('data-auth-edu', authors_edu) 
     .on('click', function() { 
      var names = $(this).attr('data-auth-name').split(','); 
      var edus = $(this).attr('data-auth-edu').split(','); 

      $('#myTable > tbody').empty(); 

      for (var i = 0; i < names.length; i++) { 
       $('#myTable > tbody:last-child').append('<tr><td>' + names[i] + '</td><td>' + edus[i] + '</td></tr>'); 
      } 
     })); 

    var selectedOption = this.value; 
}); 

HTML：

<div id="myDiv"> 
</div> 
<div id="myDiv2"> 
    <table id="myTable"> 
     <thead><tr><th>Author Name</th><th>Education</th></tr></thead> 
     <tbody></tbody> 
    </table> 
</div> 

我修改代碼來滿足你的 「表」 要求，在註釋中規定。這個解決方案應該爲你的情況做。

另一種方法是創建一個作者對象的全局列表，併爲他們分配book_id，然後在選擇列表的「更改」中查找鏈接到該book_id的列表中的所有作者。