zoukankan      html  css  js  c++  java
  • 在JavaScript文件中用ajax方法实现省市区的三级联动

    1.JavaScript Document

    $(document).ready(function(e) {

    加载三个下拉列表
    $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");

    加载显示数据
    加载省份
    FillSheng();
    加载市
    FillShi();
    加载区
    FillQu();

    当省份选中变化,重新加载市和区
    $("#sheng").change(function(){
    加载市
    FillShi();
    加载区
    FillQu();
    })
    当市选中变化的时候,重新加载区
    $("#shi").change(function(){
    加载区
    FillQu();
    })

    });

    加载省份信息
    function FillSheng()
    {
    取父级代号
    var pcode = "0001";

    根据父级代号查数据
    $.ajax({
    async:false,
    url:"load.php",
    data:{pcode:pcode},
    type:"POST",
    dataType:"JSON",
    success:function(data){
    var str = "";

    for(var sj in data)
    {
    str = str+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</option>";
    }

    $("#sheng").html(str);
    }
    });
    }

    加载市信息
    function FillShi()
    {
    取父级代号
    var pcode = $("#sheng").val();

    根据父级代号查数据
    $.ajax({
    async:false,
    url:"load.php",
    data:{pcode:pcode},
    type:"POST",
    dataType:"JSON",
    success:function(data){
    var str = "";

    for(var sj in data)
    {
    str = str+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</option>";
    }

    $("#shi").html(str);
    }
    });
    }

    加载区信息
    function FillQu()
    {
    取父级代号
    var pcode = $("#shi").val();

    根据父级代号查数据
    $.ajax({
    url:"load.php",
    data:{pcode:pcode},
    type:"POST",
    dataType:"JSON",
    success:function(data){
    var str = "";

    for(var sj in data)
    {
    str = str+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</option>";
    }

    $("#qu").html(str);
    }
    });
    }


    2.封装数据库类文件

    <?php

    $pcode = $_POST["pcode"];
    include("../fengzhuang/DBDA.class.php");
    $db = new DBDA();

    $sql = "select * from chinastates where parentareacode='{$pcode}'";

    echo $db->JsonQuery($sql);

  • 相关阅读:
    solr6.5搭建以及使用经验
    Intellij IDEA svn的使用记录
    初次从eclipse转到intellij idea上的一些经验
    Linux一键安装PHP/JAVA环境OneinStack
    CentOS下yum安装mysql,jdk以及tomcat
    centos yum换阿里云源
    ehcache配置:使用Spring+SpringMVC+Mybatis或者有shiro
    微博短链接的生成算法(Java版本)
    手把手教你使用Git
    工作中有关分布式缓存的使用和需要注意的问题梳理
  • 原文地址:https://www.cnblogs.com/jc535201285/p/6549173.html
Copyright © 2011-2022 走看看