Ajax Call для отображения нескольких выпадающих меню - нужна помощь

Question

Сразу скажу, что я даже больше начинаю с Ajax и XML, чем с jQuery. Я пытаюсь создать удобную форму поиска. Теги OPTION для каждого штата и города SELECT извлекаются из одного и того же XML-файла с помощью вызова Ajax.

Во-первых, вот HTML-код (демонстрация работает на 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="Submit" />
        <input type="reset" name="reset" id="reset" value="Reset" />
    </p>
</form>
<div id="content-section" class="search-results">search results go here</div>

XML-файл выглядит так:

<?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>

Вот 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>

И просто для примера: вот что мало CSS использует при загрузке страницы:

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

Способ, которым он должен работать, заключается в том, что каждое состояние заполняется из данных XML в состояние SELECT в качестве тега OPTION. Затем создается отдельный SELECT для городов каждого штата. Они скрыты с помощью CSS по умолчанию при загрузке страницы, а затем отображаются по одному в зависимости от выбранного состояния. Все идет нормально. Все это работает так, как я хотел.

И, наконец, предполагается, что каждый город SELECT заполняется тегами OPTION для каждого исходного города из правильного состояния в XML. Это та часть, с которой у меня проблемы. Эти городские метки ОПЦИИ просто не приходят.

Есть идеи? Я чувствую, что это одна из тех ситуаций, когда проблема смотрит мне в лицо, и я просто не вижу этого. (

Answer 1

Вот решение:

$('#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>");
        });
    });
});

Переменная, которую вы вызывали select, не была переменной jQuery, поэтому вы не можете сделать append. но если вы сделаете его одним (var select_j = $('#'+select);), а затем добавите к этой переменной, оно должно работать