• 三级联动


    三级联动:是在注册表中常见的一种类型,市会根据省的变化而变化,区会根据市的变化而变化,使用也很方便,在需要的界面引用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);
  • 相关阅读:
    18软工实践-第三次作业-结对项目1
    结对作业之代码规范
    ALPHA(7)
    ALPHA(6)
    ALPHA(五)
    404 Note Found 现场编程
    ALPHA(四)
    ALPHA冲刺(三)
    ALpha冲刺(二)
    ALPHA 冲刺(一)
  • 原文地址:https://www.cnblogs.com/dianfu123/p/5528143.html
Copyright © 2020-2023  润新知