Ajax调用以渲染多个下拉菜单—需要帮助

如何解决Ajax调用以渲染多个下拉菜单—需要帮助

|| 我会马上声明，与使用jQuery相比，我更是Ajax和XML的初学者。我正在尝试建立一个用户友好的搜索表单。使用Ajax调用从同一XML文件绘制每个州和城市SELECT的OPTION标记。 首先，这是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标签只是不进来。 有任何想法吗？我觉得这是问题困扰着我，却看不见的情况之一。 :(     

解决方法

这是一个解决方案：

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

您调用的“ 5”变量不是jQuery变量，因此您无法执行“ 6”。但是，如果将其设为一个（

var select_j = $(\'#\'+select);

），然后追加到该变量，它应该可以工作