How do I access "extra data" stored in XML using JQuery to populate a drop down

Question

Pavel K's answer worked. However, for an unknown reason I needed to change the "data-stationID" to something like "data-sid". May be a mixed case issue?

For anyone else needing more than one piece of data, this line shows how to "stack" more data into the option;

$('<option data-stationID="' +$(this).data('sid')+ '" data-lat="' +$(this).data('lat')+'" data-lon="' +$(this).data('lon')+'"  ></option>').text($(this).data('city')).appendTo(city);

My XML:

<states>
<state name="AK"> 
        <option value="null" data-stationID="null" data-lat="null" data-lon="null" data-city="Select City">Select City</option>
        <option value="326" data-stationID="9450460" data-lat="55.331799" data-lon="-131.626205" data-city="Ketchikan">Ketchikan</option>
        <option value="327" data-stationID="9451054" data-lat="56.246700" data-lon="-134.647003" data-city="Port Alexander">Port Alexander</option>
</state>
<state name="CT"> 
        <option value="null" data-stationID="null" data-lat="null" data-lon="null" data-city="Select City">Select City</option>
        <option value="35" data-stationID="8461490" data-lat="41.361401" data-lon="-72.089996" data-city="New London">New London</option>
        <option value="36" data-stationID="8465705" data-lat="41.283298" data-lon="-72.908302" data-city="New Haven">New Haven</option>
</state>

My current code:

$('#states').change(function() { // bind a trigger to when the states select changes
        var val = $(this).val(); // hold the select's new value
        var city = $('#cities').empty(); // empty the select of cities and hold a reference in 'city'
        $('state', station_data).filter(function() { // get all states...
            return val == $(this).attr('name'); // find the chosen state
        }).find('option').each(function() { //  Search Between/Within "<option..." for data ending in "city" & create a new option, set its text to the city [name], append to the cities select            
            $('<option>').text($(this).data('city')).appendTo(city);

        })
    });

$('#cities').change(function() { // bind a trigger to when the cities select changes
        console.log($(this).val() );// prints selected city


    });

My question is; How do I access the data like "data-stationID" after the user has selected a city? At best, I seem to be only able to get either all stationID's -or only the last stationID inside the option tags.

The idea is that after the user selects the city they'd like information on, I'd have access to all the other "data-*" stored between the option tags so I could query my db [or another php page]

I used the code from dynamic load data from xml to drop down box with jquery to start this.

Thanks for any help!

Per Ohgodwhy's request, This is my php code that queries my db.

fwrite($fh,  "<?xml version=\"1.0\"?>\n"); 
fwrite($fh,  "<states>\n");
while($row=mysqli_fetch_array($states)) {
    fwrite($fh,  "  <state name=\"${row['state']}\"> \n");
    $queryCities="SELECT * FROM locations WHERE state='${row['state']}'";
    $cities=mysqli_query($dbc,$queryCities);
    fwrite($fh, "           <option value=\"null\" data-stationID=\"null\" data-lat=\"null\" data-lon=\"null\" data-city=\"Select City\">Select City</option>\n");
    while($row=mysqli_fetch_array($cities)) {
        fwrite($fh,  "          <option value=\"${row['id']}\" data-stationID=\"${row['stationID']}\" data-lat=\"${row['latitude']}\" data-lon=\"${row['longitude']}\" data-city=\"".StripStuff($row['city'])."\">".StripStuff($row['city'])."</option>\n");
    }
    fwrite($fh,  "  </state>\n\n");
}
fwrite($fh,  "</states>\n");    
fclose($fh);

To clarify, I guess I don't know how JQuery handles this info, so I don't know how to access. Also, I can obviously rewrite the php code to export any format if there's a better way I should be formatting the data...

This is my XML import/load function:

$.get('test2.xml', function(data) { // get the states.xml file
        station_data = data; // save the data for future use so we don't have to call the file again
        var state = $('#states'); // states select
        $('state', station_data).each(function() { // find states in data & dynamically create a new option element & make its text the value of the "title" attribute in the XML & append it to the states select
            $('<option>').text($(this).attr('name')).appendTo(state);
        });
    }, 'xml'); // specify what format the request will return - XML

Using JQuery version: jquery-1.8.2.min.js

Using JQuery Mobile version: jquery.mobile-1.2.0.min.js

Answer 1

I think that is not clear way, but you can add option tag from XML directly to select. Try this, it should work:

Update:

$('#states').on('change', function() { // bind a trigger to when the states select changes
        var state = $(this).val(); // hold the select's new value
        var city = $('#cities').empty(); // empty the select of cities and hold a reference in 'city'
        $('state', station_data).filter(function() { // get all states...
            return state == $(this).attr('name'); // find the chosen state
        }).find('option').each(function() { //  Search Between/Within "<option..." for data ending in "city" & create a new option, set its text to the city [name], append to the cities select            
            $('<option data-stationID="'+$(this).data('stationID')+'"></option>').text($(this).data('city')).appendTo(city);
        })
    });

$('#cities').on('change', function() { // bind a trigger to when the cities select changes
        console.log($(this).children('option:selected:eq(0)').attr('data-stationID') );// prints selected city's attr
});