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);），然後附加到。變量，它應該工作