zoukankan      html  css  js  c++  java
  • 省、市、区(县)三级联动

    用纯js写,这种方法的优点是可以随时引用该js文件,只需要引入该js文件即可。

    1.写一个显示页面

    sanji.php

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <script src="../jquery-1.11.2.min.js"></script><!--引入jquery文件-->
     6 <script src="sanjiliandong.js"></script><!--引入三级联动的js文件-->
     7 <title>无标题文档</title>
     8 </head>
     9 <body>
    10 <div id="sanji"></div>
    11 </body>
    12 </html>

    2.纯js页面

    sanjiliandong.js

    // JavaScript Document
    $(document).ready(function(e) {
        //往id=sanji的div里面扔三个下拉
        var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";//做option选项
        $("#sanji").html(str);//往sanji.php文件里添加    
        FillSheng();//填充省
        FillShi();//填充市
        FillQu();//填充区
        $("#sheng").change(function(){//省变化调用FillShi()和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);
                }
            
            });
    }

    3.php处理页面

    sanjichuli.php

    <?php
    $pcode = $_POST["pcode"];
    
    include("../DBDA.class.php");
    $db = new DBDA();
    
    $sql = "select * from chinastates where parentareacode='{$pcode}'";
    
    echo $db->StrQuery($sql);
    ?>
  • 相关阅读:
    [办公自动化]企业网IE多版本引发的网页无法访问
    [每天想一想]如果你的领导不懂技术,你该怎么办?
    [思考]我们应该怎样建设企业IT
    [读书笔记]流畅的Python(Fluent Python)
    [办公自动化]网件交换机管理软件
    PCRE函数简介和使用示例
    pcre7.0在vc6.0编译
    Luogu P2173 [ZJOI2012]网络
    tensorflow学习笔记2
    python数据可视化7
  • 原文地址:https://www.cnblogs.com/chenshanhe/p/7047189.html
Copyright © 2011-2022 走看看