zoukankan      html  css  js  c++  java

  • 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=" 12px" />
                <input id="hidProviceId" type="hidden"  style=" 2px" />
                <input id="hidCityId" type="hidden" style=" 7px" />
                <br />
                </tr>
         </div>
            </form>
    </body>
    </html>
  • 相关阅读:
    javascript 构造函数,工厂模式,稳妥构造函数浅析
    javascript基本概念
    struts2 类型转换
    struts action
    struts2 配置(部分)
    struts2基本构成
    charapter 1
    java 内部类
    mysql zip 解压安装 （win10）
    python之random模块
  • 原文地址：https://www.cnblogs.com/xiaobaigang/p/1154640.html
Copyright © 2011-2022 走看看