dcat-admin 城市三级联动

秒速五厘米 2023-01-06 01:11 295阅读 0赞

在控制器form方法中加入下面代码

$form->row(function ($form){ 
    // ... 其他表单，如果不这样写不显示
    });
    // 三个显示在一行，不需要可以去掉row方法
    $form->row(function ($form){ 
    	// 省份
    	$form->width(4)->select('province_id')->options(Region::where('parent_id','')->get()->pluck('name', 'id'))->rules('required')->load('city_id', '/api/city');
    	// 城市
    	$form->width(4)->select('city_id')->load('district_id', '/api/city');
    	// 区域
    	$form->width(4)->select('district_id');
    });

建立城市数据的控制器，通过api获取

public function city(Request $request)
        { 
            $provinceId = $request->get('q');
    
            return RegionModel::where('parent_id', $provinceId)->get(['id', 'name as text']);
        }

添加路由，直接在admin的routes.php添加

$router->prefix('api')->group(function ($router) { 
            $router->get('city', 'RegionController@city');
        });

最终效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70]: /images/20221119/c274e1140b4841f48ba14f81c5e8a145.png

发表评论取消回复

表情：

评论列表（有 0 条评论，295人围观）

还没有评论，来说两句吧...

相关阅读

相关 MUI实现城市三级联动

引言对于电商行业的开发者来讲，城市三级联动可以说是老伙伴了，不用说了，收货地址肯定会涉及到城市的三级联动，本小节我们来看一个简单的城市三级联动的例子，代码很简单，只...

Love The Way You Lie/ 2024年04月17日 15:52/ 0 赞/ 100 阅读

相关如何用JS实现城市三级联动!

城市三级联动 1.思路及写法 > （1）、首先在网上下载我们所需要用到的json包，里面包含中国的省份以及对应的地级市和县级单位； > > （2）、第一步首先遍历

男娘i/ 2023年01月14日 01:57/ 0 赞/ 173 阅读

相关 dcat-admin 城市三级联动

在控制器form方法中加入下面代码 $form->row(function ($form){ // ... 其他表单，如果不这样写不显示 });

秒速五厘米/ 2023年01月06日 01:11/ 0 赞/ 296 阅读

相关 jQuery城市三级联动菜单js特效

[下载地址][Link 1] jQuery城市三级联动菜单特效是一款jQuery基于json实现的省市区三级联动城市选择实例特效。 ![66511cb215761d7bb6

逃离我推掉我的手/ 2022年09月16日 13:17/ 0 赞/ 240 阅读

相关 JS全国城市三级联动

HTML <select id="s_province" name="s_province"></select> <select id="s_city"

逃离我推掉我的手/ 2022年07月16日 09:28/ 0 赞/ 279 阅读

相关中国城市三级联动数据获取方法

腾讯地图开放平台中获取全国行政区域的地址：http://lbs.qq.com/webservice\_v1/guide-region.html；接口信息如下：

痛定思痛。/ 2022年07月13日 10:50/ 0 赞/ 262 阅读

相关城市三级联动

数据演示(DEMO)地址：[http://jquerywidget.com/jquery-citys/][http_jquerywidget.com_jquery-city

女爷i/ 2022年06月13日 02:44/ 0 赞/ 287 阅读

相关 ajax+xml的城市三级联动

城市级联的[Demo][] Area. xml中的文件数据 <address> <province name="北京市"> <city name

妖狐艹你老母/ 2022年06月01日 03:37/ 0 赞/ 225 阅读

相关全国城市三级联动

前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

旧城等待，/ 2022年05月04日 03:28/ 0 赞/ 342 阅读

相关全国城市三级联动 html+js

全国城市三级联动，没有css，所以屏幕的自适应必须自己想办法，手机端慎用（最好不要用，因为有些我也说不出的展示问题）。 html页面 <!DOCTYPE html>

本是古典何须时尚/ 2021年12月08日 18:53/ 0 赞/ 358 阅读