title: AJAX loading of XML for jQuery Change
body: <p>I'm trying to use AJAX to load my xml data into jQuery change to display certain values when the specific item is selected. I can get the cities to come up the change selector, but I can't figure out how to get the right information to output and change with the selector. Right now I just have the last value outputting no matter which item is selected.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var cityID;
  var city;
  var amt;
  
  
  $(document).ready(function() {
  
  
  $.ajax({
  type: "GET",
  url: "data/precipData.xml",
  dataType: "xml",
  success: makeItRain
  });
  });
  
  
  function makeItRain(xml) {
  
  $(xml).find("Row").each(function(){
  
  cityID = $(this).attr("id");
  city = $(this).find("city").text();
  amt = $(this).find("amt").text();
  
  $('&lt;option id="' + cityID + '"&gt;' + city + '&lt;/option&gt;').appendTo('.selectCity');
  console.log('appending');
  
  $(".selectCity").change(function() {
  
      $('option:selected', this).attr('id');
          $(".name").html(city);
          console.log('city');
          $(".ammount").html(amt);
          console.log('amt');
    });
  
  
  });
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>XML example:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
   &lt;Document&gt;
       &lt;!--Created with XmlGrid Free Online XML Editor (http://xmlgrid.net)--&gt;
       &lt;Row id="1"&gt;
             &lt;city&gt;Albuquerque, NM&lt;/city&gt;
             &lt;amt&gt;0.69&lt;/amt&gt;
       &lt;/Row&gt;
       &lt;Row id="2"&gt;
             &lt;city&gt;Arlington, TX&lt;/city&gt;
             &lt;amt&gt;13.78&lt;/amt&gt;
       &lt;/Row&gt;
       &lt;Row id="3"&gt;
             &lt;city&gt;Atlanta, GA&lt;/city&gt;
             &lt;amt&gt;20.6&lt;/amt&gt;
       &lt;/Row&gt;
   &lt;/Document&gt;
  </code></pre>