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

Question

我会马上说，我更喜欢使用Ajax和XML的初学者，而不是使用jQuery。我正在尝试构建一个用户友好的搜索表单。每个州和城市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都应该使用OPTION标记填充XML中正确状态的每个城市数据。这是我遇到麻烦的部分。这些城市的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);），然后附加到。变量，它应该工作