zoukankan      html  css  js  c++  java
  • 三级联动

    三级联动:是在注册表中常见的一种类型,市会根据省的变化而变化,区会根据市的变化而变化,使用也很方便,在需要的界面引用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);
  • 相关阅读:
    HDU 4832(DP+计数问题)
    mongodb安装与使用
    (hdu step 6.3.7)Cat vs. Dog(当施工方规则:建边当观众和其他观众最喜爱的东西冲突,求最大独立集)
    dba_dependencies查询结果视图
    情绪一点点
    c#基于这些,你已经看到了?(一)-----谁才刚刚开始学习使用
    九. 200创业教训万元获得--“神刻”这是忽悠?
    初步swift语言学习笔记6(ARC-自己主动引用计数,内存管理)
    采用CSS3 Media Query技术适应Android平板屏幕分辨率和屏幕像素密度
    线程的上下文
  • 原文地址:https://www.cnblogs.com/dianfu123/p/5528143.html
Copyright © 2011-2022 走看看