title: jQuery selector to query XML
body: <p>I know that my selector values and my xml variables aren't connected, but I can't quite figure out how to connect them. I know that the xml is coming through, but I need to link it to the content displayed once the value is selected. Here's what I have:</p>
  
  <p>New Code</p>
  
  
  
  <pre><code>&lt;script src="js/xmlDom.js"&gt;&lt;/script&gt;
  
  &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) {
      console.log($.xmlDOM(xml));
      $.xmlDOM(xml).find("Row").each(function () {
          cityID = $(this).attr("id");
          city = $(this).find("city").text();
          amt = $(this).find("amt").text();
          $('&lt;option&gt;' + city + '&lt;/option&gt;').appendTo('.selectCity');
          console.log('appending');
  
          $(".selectCity").change(function () {
  
              $('select option:selected', this).append(cityID);
              $(".name").append(city);
              console.log('city');
              $(".ammount").append(amt);
              console.log('amt');
  
          });
          //.change();
  
  
      });
  };
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;select class="selectCity"&gt;
                  &lt;option id="default"&gt;Select a city&lt;/option&gt;
  
  &lt;/select&gt;
  &lt;div class="name"&gt;
  
  &lt;/div&gt;
  &lt;div class="ammount"&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Old Code</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&gt;' + city + '&lt;/option&gt;').appendTo('.selectCity');
      console.log('appending');
  
      $(".selectCity").change(function() {
  
          $('select option:selected', this).append(cityID);
              $(".name").append(city);
              console.log('city');
              $(".ammount").append(amt);
              console.log('amt');
  
        });
        //.change();
  
  
      });
  };
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;select class="selectCity"&gt;
                  &lt;option id="default"&gt;Select a city&lt;/option&gt;
  
  &lt;/select&gt;
  &lt;div class="name"&gt;
  
  &lt;/div&gt;
  &lt;div class="ammount"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>