Jquery 之AJAX 无刷新下拉菜单

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.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 ="width: 12px"   />
         < input  id ="hidProviceId"  type ="hidden"   style ="width: 2px"   />
         < input  id ="hidCityId"  type ="hidden"  style ="width: 7px"   />
         < br  />
         </ tr >
  </ div >
     </ form >
</ body >
</ html >