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>
  • 相关阅读:
    docker学习笔记及hadoop集群搭建
    Zookeeper+Kafka+Storm+HDFS实践
    zookeeper集群搭建
    scala学习笔记——特质
    scala学习笔记-集合
    scala学习笔记-隐式转换和隐式参数
    RDD 重新分区，排序 repartitionAndSortWithinPartitions
    scala学习笔记——操作符
    JAVA基础系列（一） 概述与相关概念
    网络收藏夹
  • 原文地址：https://www.cnblogs.com/xiaobaigang/p/1154640.html
Copyright © 2011-2022 走看看