title: parse xml with jquery ajax request
body: <p>I have this xml document:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;root&gt;
  &lt;chapter&gt;
  &lt;lesson&gt;message 1&lt;/lesson&gt; 
  &lt;lesson&gt;message 2&lt;/lesson&gt;
  &lt;lesson&gt;message 3&lt;/lesson&gt;
  &lt;lesson&gt;message 4&lt;/lesson&gt;
  &lt;lesson&gt;message 5&lt;/lesson&gt;
  &lt;lesson&gt;message 6&lt;/lesson&gt;
  &lt;lesson&gt;message 7&lt;/lesson&gt;
  &lt;lesson&gt;message 8&lt;/lesson&gt;
  &lt;lesson&gt;message 9&lt;/lesson&gt;
  &lt;lesson&gt;message 10&lt;/lesson&gt;
  &lt;lesson&gt;message 11&lt;/lesson&gt;
  &lt;/chapter&gt;
  &lt;/root&gt;
  </code></pre>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;  
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;  
  &lt;script type="text/javascript"&gt;
  $(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();
  
        });
        });
  }
  
  
  
  });
  &lt;/script&gt;  
  &lt;/head&gt;
  
  &lt;body&gt;  
  &lt;div&gt;
  &lt;form id="myform" name="form1" action="" method="get"&gt;
  &lt;input style="border-style: inset" maxlength="70" size="90" type="text" id="dropdownlist" /&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;table&gt;
  &lt;p style="font-family: 'Monotype Corsiva'" align="right"&gt;
      chapter
      &lt;select style="width: 100px" name="lessons" id="dropdownlist"&gt;
          &lt;option&gt;lesson_1&lt;/option&gt;
          &lt;option&gt;lesson_2&lt;/option&gt;
          &lt;option&gt;lesson_3&lt;/option&gt;
          &lt;option&gt;lesson_4&lt;/option&gt;
          &lt;option&gt;lesson_5&lt;/option&gt;
          &lt;option&gt;lesson_6&lt;/option&gt;
          &lt;option&gt;lesson_7&lt;/option&gt;
          &lt;option&gt;lesson_8&lt;/option&gt;
          &lt;option&gt;lesson_9&lt;/option&gt;
          &lt;option&gt;lesson_10&lt;/option&gt;
          &lt;option&gt;lesson_11&lt;/option&gt;
      &lt;/select&gt;
  &lt;/p&gt;
  &lt;/table&gt;
  &lt;/body&gt;  
  &lt;/html&gt;  
  </code></pre>
  
  <p>My problem is that the code stack and show me only the first result from xml parse. When i choose the first choice from dropdown menu everything it is ok, but when i choose the others options  stack and show me  the first again. Any suggestions? </p>