Jquery 之AJAX 无刷新下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>无标题页</title> <script src="js/jquery.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(
document.getElementById("dListCity").options.add(new Option("---","-1")); $.ajax({ type:"get", url:"getcountry.aspx", dataType:"html", data:"", error:function(){
}, success:function(data){ document.getElementById("countryId").length = 0; if(data != "") { var allArray = data.split("#")[0]; var allArray1 = data.split("#")[1]; var thisarray1=allArray.split(","); var thisarray2=allArray1.split(","); } for(var i=1;i<thisarray1.length-1;i++) { document.getElementById("countryId").options.add(new Option(thisarray1[i].toString(),thisarray2[i].toString())); } } }); $.ajax({ type:"get", url:"getprovince.aspx", dataType:"html", data:"", error:function(){ }, success:function(data){ document.getElementById("dListProvince").length = 0; if(data != "") { var allArray = data.split("#")[0]; var allArray1 = data.split("#")[1]; var thisarray1=allArray.split(","); var thisarray2=allArray1.split(","); } for(var i=0;i<thisarray1.length-1;i++) { document.getElementById("dListProvince").options.add(new Option(thisarray1[i].toString(),thisarray2[i].toString())); } document.getElementById('dListProvince').selectedIndex = document.getElementById('hidProviceId').value=='' ? 0 : document.getElementById('hidProviceId').value-1;//保存选择过的省份 getCityByProvince(1); } }); }); function getCityByProvince(value) { $.ajax({ type:"get", url:"Notice.aspx?provinceId="+value, dataType:"html", data:"", error:function(){ }, success:function(data){ document.getElementById("dListCity").length = 0; if(data != "") { var allArray = data.split("#")[0]; var allArray1 = data.split("#")[1]; var thisarray1=allArray.split(","); var thisarray2=allArray1.split(","); } for(var i=0;i<thisarray1.length-1;i++) { document.getElementById("dListCity").options.add(new Option(thisarray1[i].toString(),thisarray2[i].toString())); } } }) } 
</script></head><body> <form id="form1" runat="server" > <div> <tr> Country:<select id="countryId" onblur="document.getElementById('hidCountryId').value = this.value;document.getElementById('hidCountryId').value = document.getElementById('countryId').value;"></select> Province:<select id="dListProvince" onchange="getCityByProvince(this.value);" onblur="document.getElementById('hidProviceId').value = this.value;document.getElementById('hidCityId').value = document.getElementById('dListCity').value;"></select> City:<select id="dListCity" onclick="document.getElementById('hidCityId').value = this.value;"></select> <input id="hidCountryId" type="hidden" style=" 12px" /> <input id="hidProviceId" type="hidden" style=" 2px" /> <input id="hidCityId" type="hidden" style=" 7px" /> <br /> </tr> </div> </form></body></html>