登录  /  注册
博主信息
博文 14
粉丝 1
评论 0
访问量 25108
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
thinkphp5 layui 最简单的三级联动
centcool的博客
原创
1729人浏览过

废话不多说,上效果图

微信截图_20190619123829.png

微信截图_20190619123913.png

微信截图_20190619123932.png


一、html页面代码

<!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>thinkphp5 layui 最简单的三级联动</title>
    <link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
    <script type="text/javascript" src="__STATIC__/layui/layui.js"></script>
</head>
<body>        
<div style="margin-top: 50px;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">住址</label>
            <!-- 省 -->
            <div class="layui-input-inline">
                <select id="province" name="province" lay-filter="province">
                    <option value="0">请选择省</option>
                {volist name="result" id="result"}
                    <option value="{$result.Id}">{$result.Name}</option>
                {/volist}
                </select>
            </div>
            <!-- 市 -->
            <div class="layui-input-inline" style="display: none;">
                <select id="city" name="city" lay-filter="city">                    
                </select>
            </div>
            <div class="layui-input-inline" style="display: none;">
                <select id="area" name="area" lay-filter="area">                    
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript">
//初始数据
layui.use(['form', 'layedit', 'laydate', 'jquery'], function() {
    var $ = layui.jquery;
    form = layui.form;
    layer = layui.layer;
    layedit = layui.layedit;
    laydate = layui.laydate;
    $form = $('form');

    //监听提交
    form.on('submit(demo1)', function(data) {
        layer.alert(JSON.stringify(data.field), {
            title: '最终的提交信息'
        })
        return false;
    });

    // 地址监听-省
    form.on('select(province)', function(data) {
        $form.find('select[name=city]').html('<option value="">请选择市</option>').parent().hide();
        $form.find('select[name=area]').html('<option value="">请选择县/区</option>').parent().hide();
        $.ajax({
            type: "get",
            url: "/test/index/findCityByProvinceID",
            data: {
                "id": data.value
            },
            success: function(data) {                    
                var city = data.length;
                if (city > 0) {
                    $form.find('select[name=city]').parent().show();                    
                    $.each(data, function(i, item) {                        
                        $("#city").append("<option value='" + item.Id + "'>" + item.Name + "</option>");
                    });                    
                    form.render();
                } else {
                    $form.find('select[name=city]').parent().hide();
                    form.render();
                }
            }
        });
    });

    // 地址监听-市
    form.on('select(city)', function(data) {
        $.ajax({
            type: "get",
            url: "/test/index/findAreaByCityID",
            data: {
                "id": data.value
            },
            success: function(data) {
                $form.find('select[name=area]').html('<option value="">请选择县/区</option>').parent().hide();
                var area = data.length;
                if (area > 0) {
                    $form.find('select[name=area]').parent().show();
                    $.each(data, function(i, item) {
                    $("#area").append("<option value='" + item.Id + "'>" + item.Name + "</option>");
                });
                    form.render();
                } else {
                    $form.find('select[name=area]').parent().hide();
                    form.render();
                }
            }
        });
    });
});
</script>

</body>
</html>

二、控制器代码

<?php
namespace app\test\controller;
use think\Controller;
use think\Db;
use think\facade\Request;

class Index extends Controller{
	// 查看省
	public function index(){
		$province = Db::name('area')->where(array('LevelType' => 1))->field(['Id','Name','ParentId'])->select();		
		$this->assign('result',$province);
		return $this->fetch();
	}	

	// 根据省的ID找到对应的市
	public function findCityByProvinceID(){		
		$provinceID = Request::param('id');		
		$result = Db::name('area')->where(array('ParentId' => $provinceID))->field(['Id','Name','ParentId'])->select();		
		return $result;
	}

	// 根据市的ID找到对应的区县
	public function findAreaByCityID(){
		$cityID = Request::param('id');
		$result = Db::name('area')->where(array('ParentId' => $cityID))->field(['Id','Name'])->select();
		return $result;
	}

}

三、数据库

微信截图_20190619124307.png



微信截图_20190619124241.png


四、成功

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学