AJAX loading of XML for jQuery Change

Question

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.

<script type="text/javascript">
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();

$('<option id="' + cityID + '">' + city + '</option>').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');
  });


});
};
</script>

XML example:

<?xml version="1.0" encoding="UTF-8"?>
 <Document>
     <!--Created with XmlGrid Free Online XML Editor (http://xmlgrid.net)-->
     <Row id="1">
           <city>Albuquerque, NM</city>
           <amt>0.69</amt>
     </Row>
     <Row id="2">
           <city>Arlington, TX</city>
           <amt>13.78</amt>
     </Row>
     <Row id="3">
           <city>Atlanta, GA</city>
           <amt>20.6</amt>
     </Row>
 </Document>

Answer 1

A few changes. Here is a JSFiddle. First I'll post the entire updated code, then we'll go over everything change by change.

$(function()
{
    $(xml).find("Row").each(function()
    {
        cityID = $(this).attr("id");
        city = $(this).find("city").text();
        amt = $(this).find("amt").text();

        $('<option value="' + amt + '" id="' + cityID + '">' + city + '</option>').appendTo('.selectCity');
        console.log('appending');
    });

    $(".selectCity").change(function()
    {
        var sel = $(this).children("option:selected");
        city = sel.text();
        amt = sel.attr("value");
        $(".name").html(city);
        $(".ammount").html(amt);
    });
});

1. You'll notice that I've moved the .change() listener outside of the .each() function. JQuery has a handy (albeit occasionally obstructing) ability to attach multiple functions to the same listener. This is super handy when you're working on a large project, with multiple contributors who may all want to attach listeners to the same object. In this case, however, attaching a new listener handler to .selectCity on each iteration of the loop will leave you with nothing but a lot of redundant listeners; and so we move it outside of the .each().

2. $('<option value="' + amt + '" id="' + cityID + '">' + city + '</option>').appendTo('.selectCity');

   (This is the important one) you declared the variable city and amt at the top scope. These variables will be persistent, so that in any case after the finish of the loop (for example, when a user selects an option) they will be equal to the last values set (the last values found by the loop). There needs to be some way to associate each of these values with each option tag. Fortunately, the option tag has a handy attribute called value. value is a small amount of data that can be attached to the option in case the display value isn't adequate. Now, both city and amt are directly associated with the option element.

3. var sel = $(this).children("option:selected");

   You almost had the option:selected selector used properly, but you forgot to set it to a variable. I've set it to the variable sel; you can see how this gives us easy access to the selected option.

4. city = sel.text(); amt = sel.attr("value"); $(".name").html(city); $(".ammount").html(amt);

   Finally, we get the desired data from the option element and set it accordingly.