<link rel="stylesheet" href="/static/layui/css/formSelects-v4.css"/>
<script src="/static/layui/js/formSelects-v4.js"></script>
2、定义一个下拉框
<div class="layui-inline">
<label class="layui-form-label">地区</label>
<div class="layui-input-inline" style="width:350px">
<select name="deptId" id="deptId" lay-filter="deptId" lay-verify="required"
lay-reqtext="地区不能为空" xm-select="select1" xm-select-height="36px"></select>
</div>
</div>
3、js配置，注意：base: ‘/static/layui/js/’ 一定要与你引入的路径一致，并且写全，不然不起作用
<script>
//全局定义一次, 加载formSelects
layui.config({
base: '/static/layui/js/' //此处路径请自行处理, 可以使用绝对路径
}).extend({
formSelects: 'formSelects-v4'
});
//加载模块
layui.use(['jquery', 'formSelects'], function(){
form = layui.form;
var layer = layui.layer,
$ = layui.$;
var formSelects = layui.formSelects;
formSelects.data('select1', 'local', {
arr: [
{"name": "随笔", "value": 1},
{"name": "测试", "value": 2},
{"name": "博客日志", "value": 3}
]
});
});
</script>
4、实现从后端查询数据到下拉框，并且编辑时候回显到下拉框
<script>
//全局定义一次, 加载formSelects
layui.config({
base: '/static/layui/js/' //此处路径请自行处理, 可以使用绝对路径
}).extend({
formSelects: 'formSelects-v4'
});
//加载模块
layui.use([ 'jquery', 'formSelects' ], function() {
form = layui.form;
var layer = layui.layer, $ = layui.$;
var formSelects = layui.formSelects;
var formData = parent.formData;//拿到父页面数据
$.ajax({
url : '/stress/taskprogress/getdept',
dataType : 'json',
type : 'get',
success : function(data) {
var keys = [];
$('#deptId').empty();
$('#deptId').append(new Option("请选择机构", ""))
$.each(data.data, function(index, item) {
var temp = temp = {
"name" : item.deptName,
"value" : item.deptId,
"children" : fn(item.children)
//这里需要注意，value应该不同，否则在下拉框选择数据的时候，选择上的数据回事一样的
}
if (formData != null) { //编辑时候回显
var deptId = formData.deptId.split(",");
for (var i = 0; i < deptId.length; i++) {
if (item.deptId == deptId[i]) {
temp = {
"name" : item.deptName,
"value" : item.deptId,
"selected" : "selected",
"children" : fn(item.children)
//这里需要注意，value应该不同，否则在下拉框选择数据的时候，选择上的数据回事一样的
}
}
}
}
keys.push(temp);
});
//渲染select
form.render("select");
formSelects.data("select1", "local", {
arr : keys
});
}
});
//递归求字选择项
function fn(children) {
var child = [];
if (children == null) {
return child;
}
$.each(children, function(index, item) {
var temp = {
"name" : item.deptName,
"value" : item.deptId,
"children" : fn(item.children)
//这里需要注意，value应该不同，否则在下拉框选择数据的时候，选择上的数据回事一样的
}
if (formData != null) {
var deptId = formData.deptId.split(",");
for (var i = 0; i < deptId.length; i++) {
if (item.deptId == deptId[i]) {
temp = {
"name" : item.deptName,
"value" : item.deptId,
"selected" : "selected",
"children" : fn(item.children)
//这里需要注意，value应该不同，否则在下拉框选择数据的时候，选择上的数据回事一样的
}
}
}
}
child.push(temp);
});
return child;
}
});
</script>
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！