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>
posted on 2008-04-15 16:56  萧佰刚  阅读(1419)  评论(0)  编辑  收藏  举报