自己动手利用Layui开发省市区联动下拉框

其实省市区联动下拉框的开发并不复杂，但是多数时候我们则更倾向于使用别人开发好的现成的级联下拉框组件。今天波波不是特别忙，就分享下省市区联动下拉框的开发。我们之所以要开发它是因为通常情况下我们需要前端的城市ID与数据库保持一致，方便检索。

全国行政区划的级联下拉框开发一般有两种模式：一种是静态的，一种是动态的。所谓静态的级联下拉框则是首先把需要用到的相关数据保存为json或xml等便于检索的格式，然后在选择过程中从静态的文件中搜索出下一级的结果，然后渲染到页面中。而动态的则很容易理解，就是每次选择后便直接通过后台查询下一级的数据，并将动态获取的结果渲染到html页面中。

下面以动态查询为例，我们首先看下预览效果：

HTML部分：

<div class="layui-form-item layui-inline">
<label class="layui-form-label">行政区域</label>
<div class="layui-input-inline">
<select name="province" lay-filter="province" data-value="{$Think.get.province|default=''}" id="province">
{$province}
</select>
</div>
<div class="layui-input-inline">
<select name="city" lay-filter="city" data-value="{$Think.get.city|default=''}" id="city">
</select>
</div>
<div class="layui-input-inline">
<select name="area" lay-filter="area" data-value="{$Think.get.area|default=''}" id="area">
</select>
</div>
<div class="layui-input-inline">
<select name="street" lay-filter="street" data-value="{$Think.get.street|default=''}" id="street">
</select>
</div>
</div>
<div class="layui-form-item layui-inline">
<button class="layui-btn layui-btn-primary"><i class="layui-icon"></i> 搜索</button>
</div>

JS部分：

<script>
window.form.render();
layui.use(['form'],function () {
var form = layui.form;
form.on('select(province)',function (data) {
var prov = data.value;
$.post('{:url("area_query")}',{"area_id":prov},function (ret) {
$("#city").empty();
$("#area").empty();
$("#street").empty();
$("#city").append(ret);
window.form.render();
})
})
form.on('select(city)',function (data) {
var city = data.value;
$.post('{:url("area_query")}',{"area_id":city},function (ret) {
$("#area").empty();
$("#street").empty();
$("#area").append(ret);
window.form.render();
})
})
form.on('select(area)',function (data) {
var area = data.value;
$.post('{:url("area_query")}',{"area_id":area},function (ret) {
$("#street").empty();
$("#street").append(ret);
window.form.render();
})
})
})
</script>

PHP查询接口：

public function area_query(){
$area_id = input('post.area_id','','intval');
$list = Db::name("system_region_copy")->where(['pid'=>$area_id])->field('id,pid,name,type')->select();
$data = '<option value="">请选择</option>'.PHP_EOL;
foreach ($list as $key=>$value){
$data .= "<option value='".$value['id']."'>".$value['name']."</option>".PHP_EOL;
}
return json($data);
}