Ajax Call to Render Multiple Dropdowns -- Needs Help

I'll state right away that I'm even more of a beginner with Ajax and XML than I am with jQuery. I'm attempting to build a user-friendly search form. The OPTION tags for each state and city SELECT is being drawn from the same XML file using an Ajax call.

First, here's the HTML (demo running at http://tomryandesign.com/dev/search-form-demo.html):

<form id="SEARCH" action="">
    <p>
        <select name="STATE" id="STATE">
            <option>State/Province</option>
        </select>
        <span id="CITIES"></span>
    </p>
    <p>
        <input type="submit" name="submit" id="submit" value="Sub开发者_如何学运维mit" />
        <input type="reset" name="reset" id="reset" value="Reset" />
    </p>
</form>
<div id="content-section" class="search-results">search results go here</div>

The XML file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<dropdown>
    <STATES>
        <state value="IL">Illinois</state>
            <ILCITIES>
                <city value="01">Chicago</city>
                <city value="02">Aurora</city>
                <city value="03">Rockford</city>
                <city value="04">Joliet</city>
                <city value="05">Naperville</city>
                <city value="06">Springfield</city>
                <city value="07">Peoria</city>
                <city value="08">North Peoria</city>
                <city value="09">Elgin</city>
                <city value="10">Waukegan</city>
            </ILCITIES>
        <state value="WI">Wisconsin</state>
            <WICITIES>
                <city value="01">Milwaukee</city>
                <city value="02">Madison</city>
                <city value="03">Green Bay</city>
                <city value="04">Kenosha</city>
                <city value="05">Racine</city>
                <city value="06">Appleton</city>
                <city value="07">Waukesha</city>
                <city value="08">Oshkosh</city>
                <city value="09">Eau Claire</city>
                <city value="10">Janesville</city>
            </WICITIES>
    </STATES>
</dropdown>

Here's the jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "cities.xml",
        dataType: "xml",
        success: function(xml) {
            var select = $('#STATE');
            $(xml).find('STATES').each(function(){
                $(this).find('state').each(function(){
                    var value = $(this).attr('value');
                    var label = $(this).text();
                    select.append("<option value='"+ value +"'>" + label + "</option>");
                });
            });
            var select = $('#CITIES');
            $(xml).find('STATES').each(function(){
                $(this).find('state').each(function(){
                    var value = $(this).attr('value');
                    select.append("<select id='"+ value +"CITIES' name='"+ value +"CITIES'><option>City</option></select>");
                });
            });



            // PROBLEM AREA STARTS HERE

            $('#SEARCH').find('select[id*="CITIES"]').each(function(){
                var select = $(this).attr('id');
                $(xml).find(select).each(function(){
                    $(this).find('city').each(function(){
                        var value = $(this).attr('value');
                        var label = $(this).text();
                        select.append("<option value='"+ value +"'>" + label + "</option>");
                    });
                });
            });


        }
    });
});
//-->
</script>

And just for good measure, here's what little CSS is involved when the page loads:

<style type="text/css">
<!--
form#SEARCH select[id*='CITIES'],
#content-section.search-results {
    display: none;
}
-->
</style>

The way it's supposed to work is that each state is populated from XML data into a State SELECT as an OPTION tag. Then, a separate SELECT is rendered for each state's cities. These are hidden with CSS by default when the page loads, and then appear one at a time according to which state is selected. So far, so good. All that stuff works the way I intended.

Lastly, each city SELECT is supposed to be populated with OPTION tags for each city datum from the correct state in the XML. That's the part that I'm having trouble with. Those city OPTION tags just aren't coming in.

Any ideas? I feel like this is one of those situations where the problem is staring me in the face and I just can't see it. :(

Here is a solution:

$('#SEARCH').find('select[id*="CITIES"]').each(function(){
    var select = $(this).attr('id');
    $(xml).find(select).each(function(){
        $(this).find('city').each(function(){
           var value = $(this).attr('value');
           var label = $(this).text();
           var select_j = $('#'+select);
           select_j.append("<option value='"+ value +"'>" + label + "</option>");
        });
    });
});

The variable you were calling select was not a jQuery variable, so you could not do append. but if you make it one (var select_j = $('#'+select);) then append to that variable, it should work