本文旨在熟悉Dcat Admin中自定义form组件，这个省市县区已有相应的插件了。和插件不同的是，提交到数据库保存时，只需要一个字段，且直接保存省市县区的名称而不是key。
方法记录如下：
一、app/Admin/Extensions目录中新建Ssxq.php:
namespace App\Admin\Extensions;
use Dcat\Admin\Form\Field;
class Ssxq extends Field
{
protected $view = 'admin.ssxq';
}
二、app/Admin/bootstrap.php中引用js并注册组件
use App\Admin\Extensions\Ssxq;
// 注册ssxq联动前端组件别名
Admin::asset()->alias('@ssxq', [
'js' => ['/vendor/ssxq/distpicker.js']
]);
Form::extend('ssxq', Ssxq::class);
三、 将js文件放public/vendor/ssxq目录：
文件可github搜索distpicker.js下载。
四、 建立模板/resources/views/admin目录下ssxq.blade.php:
<div class="{{$viewClass['form-group']}}">
<label class="{{$viewClass['label']}} control-label">{{$label}}</label>
<div class="{{$viewClass['field']}}">
@include('admin::form.error')
<div {!! $attributes !!} style="width: 100%; height: 100%;">
<select name="province{{$name}}"></select>
<select name="city{{$name}}"></select>
<select name="district{{$name}}"></select>
</div>
<input type="hidden" name="{{$name}}" value="{{ old($column, $value) }}" />
@include('admin::form.help-block')
</div>
</div>
<script require="@ssxq" init="{!! $selector !!}">
Dcat.ready(function () {
var old = "{{ $value }}";//赋值
if(old)var oldsz = old.split("_");
$this.distpicker({
province: old ? oldsz[0] : '---- 所在省 ----',
city: old ? oldsz[1] : '---- 所在市 ----',
district: old ? oldsz[2] : '---- 所在区 ----',
autoSelect: false,
});
//因提交时赋值，第一次不成功，第二次才正确赋值，因此只能监听select
$("select[name='district" + "{{$name}}" + "']").on('change',() => {
var province = $("select[name='province" + "{{$name}}" + "']").val();
var city = $("select[name='city" + "{{$name}}" + "']").val();
var district = $("select[name='district" + "{{$name}}" + "']").val();
var nr = old ? old : '';
if(province && city && district){
var nr = province + '_' + city + '_' + district;
}
$this.parents('.form-field').find('input[name={{ $name }}]').val(nr);
});
});
</script>
五、使用方法：
$form->ssxq('beizhu');
走过的弯路，在form提交时赋值，虽然成功改变了input值，但数据已在赋值前提交了后台，导致修改不成功。
$("form").find('[type="submit"],.submit').click(function (e)
所以后来采用监听select的方法，解决了这个问题。
2021.3.28发现，这个组件在网页初次加载时，总是不成功，最后发现是Dcat.ready的原因，将这个删除就可以了。
提供