我會馬上說,我更喜歡使用Ajax和XML的初學者,而不是使用jQuery。我正在嘗試構建一個用戶友好的搜索表單。每個州和城市SELECT的OPTION標籤都是使用Ajax調用從相同的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中正確狀態的每個城市數據。這是我遇到麻煩的部分。這些城市的OPTION標籤只是沒有進來。
任何想法?我覺得這是面臨問題的那些情況之一,我看不到它。 :(
成功!謝謝!:) – Tom 2011-05-24 18:56:25
@湯姆沒有問題^ _ ^很高興幫助 – Neal 2011-05-24 18:57:12