Ajax-省市区三级联动

三级联动：

此例在ThinkPHP3.2框架中实现

1.创建数据

DROP TABLE IF EXISTS `region`;
CREATE TABLE `region` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '地区编号',
  `parentid` int(11) NOT NULL COMMENT '上级id',
  `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL COMMENT '名称',
  PRIMARY KEY (`id`),
  KEY `district_upid_index` (`parentid`),
  KEY `district_name_index` (`name`)
) ENGINE=MyISAM AUTO_INCREMENT=91154 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

2.在view文件夹创建静态页面index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>省市区三级联动</title>
    <style>
        select{
            width: 150px;
        }
    </style>
</head>
<body>
<!--省-->
<select name="provinceId" id="provinceId">
        <option>请选择</option>
        <volist name="provinceList" id="province">
            <option value="{$province.id}">{$province.name}</option>
        </volist>
</select>
<!--市-->
<select name="cityId"  id="cityId">
        <option>请选择</option>
</select>
<!--区-->
<select name="districtId"  id="districtId">
        <option>请选择</option>
</select>
</body>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
    //省，市，区三级联动(显示市)
    $("#provinceId").change(function(){
        var provinceId=$(this).val();
        $.ajax({
            url:"{:U('Demo/regionAjaxGetCitys')}",
            Type:"POST",
            data:"provinceId="+provinceId,
            dataType:"json",
            success:function(data){
                var city = data.city;
                var option=$("<option></option>");
                $(option).val("0");
                $(option).html("请选择");
                var option1=$("<option></option>");
                $(option1).val("0");
                $(option1).html("请选择");
                $("#cityId").html(option);
                $("#districtId").html(option1);
                for(var i in city){
                    var option=$("<option></option>");
                    $(option).val(city[i]['id']);
                    $(option).html(city[i]['name']);
                    $("#cityId").append(option);
                }
            }
        });
    });
    //省，市，区三级联动(显示地区)
    $("#cityId").change(function(){
        var cityId=$(this).val();
        $.ajax({
            url:"{:U('Demo/regionAjaxGetdDistrict')}",
            Type:"POST",
            data:"cityId="+cityId,
            dataType:"json",
            success:function(data){
                var district = data.district;
                var option=$("<option></option>");
                $(option).val("0");
                $(option).html("请选择");
                $("#districtId").html(option);
                for(var i in district){
                    var option=$("<option></option>");
                    $(option).val(district[i]['id']);
                    $(option).html(district[i]['name']);
                    $("#districtId").append(option);
                }
            }
        });
    });
</script>
</html>

3.创建控制器DemoController.class.php

<?php
namespace Home\Controller;
class DemoController extends BaseController
{
    /**
     *查询
     */
    public function getList($where){
        $regionModel=D('Region');
        $list = $regionModel->where($where)->select();
        return $list;
    }
    /**
     *获取省和直辖市
     */
    public function index(){
        $where['parentid'] = 0;
        $listprovince = $this->getList($where);
        $this->assign("provinceList",$listprovince);
        $this->display();
    }
    /**
     *省市区三级联动ajax（获取市）
     */
    public function regionAjaxGetCitys(){
        $where['parentid'] = I('provinceId');
        $list = $this->getList($where);
        $data=array('city'=>$list);
        header("Content-type: application/json");
        exit(json_encode($data));
    }
    /**
     *省市区三级联动ajax(获取地区)
     */
    public function regionAjaxGetdDistrict(){
        $where['parentid'] = I('cityId');
        $list = $this->getList($where);
        $data=array('district'=>$list);
        header("Content-type: application/json");
        exit(json_encode($data));
    }
}

Ajax-省市区三级联动

三级联动：

1.创建数据

2.在view文件夹创建静态页面index.html

3.创建控制器DemoController.class.php

1988

引用和评论

浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

手写一个动态海洋和天空效果的vue hooks

Base64编码的“暗坑”：解密失败？可能是这些原因！

原生electron起步-从零到一完成构建和打包