2011-12-14 162 views
4

我有這樣的XML文檔解析XML:與jQuery Ajax請求

<?xml version="1.0" encoding="utf-8"?> 
<root> 
<chapter> 
<lesson>message 1</lesson> 
<lesson>message 2</lesson> 
<lesson>message 3</lesson> 
<lesson>message 4</lesson> 
<lesson>message 5</lesson> 
<lesson>message 6</lesson> 
<lesson>message 7</lesson> 
<lesson>message 8</lesson> 
<lesson>message 9</lesson> 
<lesson>message 10</lesson> 
<lesson>message 11</lesson> 
</chapter> 
</root> 

這是我的代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() 
{ 
$.ajax({ 
type: "GET", 
url: "numbers.xml", 
dataType: "xml", 
success: parseXml 
}); 
function parseXml(xml) { 

    $(xml).find("chapter").each(function() { 

     $(this).find("lesson").each(function() { 


     $("#dropdownlist").val($(this).text()); 

     $("select").change(function() {   
var str = "";   
$("select option:selected").each(function() {     
str += $(this).val().text() + " ";    
});   
$("#dropdownlist").val(str);   
})   
.change(); 

     }); 
     }); 
} 



}); 
</script> 
</head> 

<body> 
<div> 
<form id="myform" name="form1" action="" method="get"> 
<input style="border-style: inset" maxlength="70" size="90" type="text" id="dropdownlist" /> 
</form> 
</div> 
<table> 
<p style="font-family: 'Monotype Corsiva'" align="right"> 
    chapter 
    <select style="width: 100px" name="lessons" id="dropdownlist"> 
     <option>lesson_1</option> 
     <option>lesson_2</option> 
     <option>lesson_3</option> 
     <option>lesson_4</option> 
     <option>lesson_5</option> 
     <option>lesson_6</option> 
     <option>lesson_7</option> 
     <option>lesson_8</option> 
     <option>lesson_9</option> 
     <option>lesson_10</option> 
     <option>lesson_11</option> 
    </select> 
</p> 
</table> 
</body> 
</html> 

我的問題是,代碼堆棧,告訴我只能從XML的第一個結果解析。當我從下拉菜單中選擇第一個選項時,一切都可以,但是當我選擇其他選項堆棧並再次顯示第一個選項時。有什麼建議麼?

回答

1

試試這個代碼:

$(document).ready(function() { 
    $.ajax({ 
     type: "GET", 
     url: "numbers.xml", 
     dataType: "xml", 
     success: function(response) { 
      $('lesson', response).each(function() { 
       $("#dropdownlist").append($('<option />').text($(this).text())); 
      }); 
     } 
    }); 

    $("select").change(function() { 
     var str = ''; 

     $(this).find(":selected").each(function() { 
      str += $(this).text() +' '; 
     }); 

     $("#dropdownlist").val(str); 
    }).change(); 
}); 

你是每次循環時附加change()觸發你的元素。

+0

我想從XML文件中獲取數據。此代碼顯示下拉選項(lesson_1,lesson_2,lesson_3 ...),例如,當我從下拉列表中選擇第一個選項時,我想從xml文件向我顯示「消息1」 – billaki 2011-12-14 00:34:46