zoukankan      html  css  js  c++  java
  • 5月20日 三级联动

    三级联动:是在注册表中常见的一种类型,市会根据省的变化而变化,区会根据市的变化而变化,使用也很方便,在需要的界面引用div即可

    主页面:写好div,引用 js 即可

    <head>
    <script src="../jquery-2.2.3.min.js"></script>
    <script src="san.js"></script>//注意:必须在Jquery下引用
    </head>
    
    <body>
    <div id="sanji"></div>
    </body>

    san.js页面:主要内容在js页面写好

    具体步骤:

    1.在div中写入三个下拉列表,分别是省、市、区

    2.填充内容:选中省的时候改变市和区,选中市的时候改变区

    3.写方法:将内容填充进去

    // JavaScript Document
    $(document).ready(function(e) {
        
        //将DIV里面写入三个下拉列表
        $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
        
        //填充内容(结果)
        //1.填充省
        FillSheng();
        //2.填充市
        FillShi();
        //3.填充区
        FillQu();
        
        //如果省选中变化的时候,去填充市和区
        $("#sheng").change(function(){
            
            //改变市
            FillShi();
            //改变区
            FillQu();
            })
            
            //如果市选中变化的时候,去填充区
        $("#shi").change(function(){
            
            //改变区
            FillQu();
            })
            
        //填充省的方法
        function FillSheng()
        {
            //找到父级代号
            var pcode = "0001";
            
            $.ajax({
                async:false,
                url:"chuli.php",
                data:{pcode:pcode},
                type:"POST",
                dataType:"TEXT",
                success: function(data){
                    
                    var str = "";
                    var hang = data.split("|");
                    for(var i=0;i<hang.length;i++)
                    {
                        var lie = hang[i].split("^");
                        str +="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                    }
                    $("#sheng").html(str);
                    }
                
                });
        }
        
        //填充市的方法
        function FillShi()
        {
            var pcode = $("#sheng").val();
            
            $.ajax({
                async:false,
                url:"chuli.php",
                data:{pcode:pcode},
                type:"POST",
                dataType:"TEXT",
                success: function(data){
                    
                    var str = "";
                    var hang = data.split("|");
                    for(var i=0;i<hang.length;i++)
                    {
                        var lie = hang[i].split("^");
                        str +="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                        
                    }
                    $("#shi").html(str);
                    }
                
                });
        }
        
        //填充区的方法
        function FillQu()
        {
            var pcode = $("#shi").val();
            
            $.ajax({
                async:false,
                url:"chuli.php",
                data:{pcode:pcode},
                type:"POST",
                dataType:"TEXT",
                success: function(data){
                    
                    var str = "";
                    var hang = data.split("|");
                    for(var i=0;i<hang.length;i++)
                    {
                    var lie = hang[i].split("^");
                    str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                    }
                    $("#qu").html(str);
                    }
                
                });
        }
        
    });

    chuli.php页面:

    <?php
    $pcode = $_POST["pcode"];
    include("../DBDA.class.php");
    $db = new DBDA();
    $sql = "select Areacode,Areaname,parentareacode from chinastates where parentareacode='{$pcode}'";
    
    echo $db->StrQuery($sql);
  • 相关阅读:
    spring boot SpringApplication.run 执行过程
    算法 计算四则运算字符串结果
    算法 RingBuffer
    java BigDecimal 四舍五入
    算法 常用函数和近似
    java 多线程执行
    Java 三个线程依次输出ABC
    Java interrupt 中断
    java 垃圾收集器与内存分配策略
    软件项目与软件产品的区别
  • 原文地址:https://www.cnblogs.com/dongqiaozhi/p/5514627.html
Copyright © 2011-2022 走看看