錄制的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>
```
