• 省、市、区三级联动


    直接用JS写,相当于做一个小插件,以后用到的时候可以直接用,很方便。

    做一个显示页面:

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    
    <script src="../jquery-1.11.2.min.js"></script>
    <script src="sanjiliandong.js"></script>
    
    </head>
    
    <body>
    
    <div id="sanji"></div>
    
    
    </body>
    </html>

    建立纯JS页面:

    $(document).ready(function(e) {
        //往id=sanji的div里面扔三个下拉
        var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";
        
        $("#sanji").html(str);
        
        FillSheng();  //填充省
        FillShi();  //填充市
        FillQu();  //填充区
        
        $("#sheng").change(function(){  //省变化调用FillSshi和FillQu
                FillShi();
                FillQu();
            })
        $("#shi").change(function(){  //市变化调用FillQu
                FillQu();
            })
        
    });
    
    //填充省的方法
    function FillSheng()
    {
        var pcode = "0001";
        
        $.ajax({
            async:false,
            url:"sanjichuli.php",
            data:{pcode:pcode},
            type:"POST",
            dataType:"TEXT",
            success: function(data){
                    var hang = data.split("|");
                    var str ="";
                    for(var i=0;i<hang.length;i++)
                    {
                        lie = hang[i].split("^");
                        str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                    }
                    $("#sheng").html(str);
                }
            
            });
    }
    
    //填充市的方法
    function FillShi()
    {
        var pcode = $("#sheng").val();
        
        $.ajax({
            async:false,
            url:"sanjichuli.php",
            data:{pcode:pcode},
            type:"POST",
            dataType:"TEXT",
            success: function(data){
                    var hang = data.split("|");
                    var str ="";
                    for(var i=0;i<hang.length;i++)
                    {
                        lie = hang[i].split("^");
                        str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                    }
                    $("#shi").html(str);
                }
            
            });
    }
    
    //填充区的方法
    function FillQu()
    {
        var pcode = $("#shi").val();
        
        $.ajax({
            async:false,
            url:"sanjichuli.php",
            data:{pcode:pcode},
            type:"POST",
            dataType:"TEXT",
            success: function(data){
                    var hang = data.split("|");
                    var str ="";
                    for(var i=0;i<hang.length;i++)
                    {
                        lie = hang[i].split("^");
                        str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                    }
                    $("#qu").html(str);
                }
            
            });
    }

    PHP处理页面,从数据库读取数据

    <?php
    $pcode = $_POST["pcode"];
    
    include("DBDA.class.php");
    $db = new DBDA();
    
    $sql = "select * from chinastates where parentareacode='{$pcode}'";
    
    echo $db->StrQuery($sql);
  • 相关阅读:
    String StringBuffer StringBuilder 之间的区别
    StringBuffer和String的相互转换
    StringBuffer的替换和反转和截取功能
    StringBuffer的添加与删除功能
    后端——框架——容器框架——spring_core——容器
    后端——框架——容器框架——spring_core——bean以及xml配置
    后端——框架——容器框架——spring_core——注解
    后端——框架——容器框架——spring_core——国际化 & Properties
    后端——框架——容器框架——spring_core——Resource
    后端——框架——容器框架——spring_core——校验器
  • 原文地址:https://www.cnblogs.com/u1020641/p/6058978.html
Copyright © 2020-2023  润新知