录制的GIF动画
![mark](http://qiniu.newthink.cc/blog/20171012-180706383.gif)
>注意:这里要注意以下同几点:
1、`form.on` 的用法
2、`form.render('select');` 的用法
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/assets/layui/layui.js"></script>
<link rel="stylesheet" href="/assets/layui/css/layui.css">
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">联动选择框</label>
<div class="layui-input-inline">
<select name="province" id="province" lay-filter="provincelay">
<option value="">请选择省</option>
<volist name="province" id="vo">
<option value="{$vo.id}">{$vo.name}</option>
</volist>
</select>
</div>
<div class="layui-input-inline">
<select name="city" id="city" lay-filter="citylay">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline">
<select name="distinct" id="distinct" lay-filter="distinctlay">
<option value="">请选择县/区</option>
</select>
</div>
</div>
</form>
<script>
layui.use(['form', 'layer'], function () { //独立版的layer无需执行这一句
var $ = layui.jquery
, form = layui.form
, layer = layui.layer; //独立版的layer无需执行这一句
//点击省,更换市
form.on('select(provincelay)', function (data) {
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
var parent_id = data.value;
var url = '/admin/test/getRegion/level/2/parent_id/' + parent_id;
$.ajax({
type: "GET",
url: url,
error: function (request) {
layer.msg('服务器繁忙, 请联系管理员!');
return;
},
success: function (v) {
v = '<option value="0">选择城市</option>' + v;
$('#city').empty().html(v);
console.log(v);
form.render('select');
}
});
});
//点击市,更换县
form.on('select(citylay)', function (data) {
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
var parent_id = data.value;
var url = '/admin/test/getRegion/level/3/parent_id/' + parent_id;
$.ajax({
type: "GET",
url: url,
error: function (request) {
layer.msg('服务器繁忙, 请联系管理员!');
return;
},
success: function (v) {
v = '<option value="0">选择区域</option>' + v;
$('#distinct').empty().html(v);
console.log(v);
form.render('select');
}
});
});
});
</script>
</body>
</html>
```