表格查询-三级联查
## onion.threeLevel
### 功能
查询三级联动的列表
### 使用场景
表单需要查询三级分类时使用
### 如何使用
**onion.threeLevel();**
直接调用即可
HTML使用以下模板
```html
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3 mt10 hide">
<label class="layui-form-label labeltxt">一级分类：</label>
<div class="layui-input-block layui-form" lay-filter="firstLetForm">
<select name="firstLetId" lay-filter="firstLet" id="firstLetId">
<option value="">请选择一级分类</option>
</select>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3 mt10 hide">
<label class="layui-form-label labeltxt">二级分类：</label>
<div class="layui-input-block layui-form" lay-filter="secondLetForm">
<select name="secondLetId" lay-filter="secondLet" id="secondLetId">
<option value="">请选择二级分类</option>
</select>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3 mt10 hide">
<label class="layui-form-label labeltxt">三级分类：</label>
<div class="layui-input-block layui-form" lay-filter="thirdLetForm">
<select name="thirdLetId" lay-filter="thirdLet" id="thirdLetId">
<option value="">请选择三级分类</option>
</select>
</div>
</div>
```
### api定义
``` javascript
onion.threeLevel = function () {
// 三级列表联查
function getLevelLists(leId, callback) {
onion.ajax.post('/common/let_list/' + leId, function (res) {
callback && callback(res);
})
}
function clearSelect(dom) {
$(dom).find("option:selected").text("");
$(dom).empty();
}
getLevelLists(0, function (res) {
if (res.code == onion.networkState.SUCC) {
var data = res.data;
clearSelect('#firstLetId')
for (var i = 0; i < data.length; i++) {
if (i == 0) {
var temp = '<option value="">请选择一级分类</option>';
$('#firstLetId').append(temp);
}
var temp = '<option value="' + data[i].letId + '">' + data[i].letName + '</option>';
$('#firstLetId').append(temp);
}
form.render('select', 'firstLetForm');
form.on('select(firstLet)', function (data) {
var letId = data.value;
if (!letId) {
// onion.layer.tipMsg('请选择一级分类');
clearSelect('#secondLetId');
clearSelect('#thirdLetId');
form.render('select', 'secondLetForm');
form.render('select', 'thirdLetForm');
return;
}
getLevelLists(letId, function (res) {
if (res.code != onion.networkState.SUCC) return;
var data = res.data;
clearSelect('#secondLetId');
clearSelect('#thirdLetId');
for (var i = 0; i < data.length; i++) {
if (i == 0) {
var temp = '<option value="">请选择二级分类</option>';
$('#secondLetId').append(temp);
}
var temp = '<option value="' + data[i].letId + '">' + data[i].letName + '</option>';
$('#secondLetId').append(temp);
}
form.render('select', 'secondLetForm');
form.render('select', 'thirdLetForm');
form.on('select(secondLet)', function (data) {
var letId = data.value;
if (!letId) {
// onion.layer.tipMsg('请选择二级分类');
clearSelect('#thirdLetId');
form.render('select', 'thirdLetForm');
return;
}
getLevelLists(letId, function (res) {
if (res.code != onion.networkState.SUCC) return;
var data = res.data;
clearSelect("#thirdLetId");
for (var i = 0; i < data.length; i++) {
if (i == 0) {
var temp = '<option value="">请选择三级分类</option>';
$('#thirdLetId').append(temp);
}
var temp = '<option value="' + data[i].letId + '">' + data[i].letName + '</option>';
$('#thirdLetId').append(temp);
}
form.render('select', 'thirdLetForm');
})
})
})
})
}
})
}
```