Question

我将立即声明，与使用jQuery相比，我更像是Ajax和XML的初学者。我正在尝试构建一个用户友好的搜索表单。每个州和城市SELECT的OPTION标签都是使用Ajax调用从同一XML文件中提取的。

首先，这是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应该使用XML中正确状态的每个城市数据的OPTION标签填充。那是我遇到麻烦的部分。那些城市的OPTION标签都没有进来。

有什么想法吗？我觉得这是其中一个问题是面对我的问题，而我却看不到它。：（

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);）然后附加到那个变量，它应该可以工作

Ajax调用呈现多个下拉列表 - 需要帮助

1 个答案: