layui formSelects实现下拉框select多选,并且编辑时候回显

1、首先引入formSelects相关配置：引入formSelects-v4的js、css，如果采用第三步的方式引入也是可以的，这里推荐第三步layui.config方式引入。 link rel="stylesheet" href="/static/layui/css/formSelects-v4.css"/script src="/static/layui/js/formSelects-v4.js"/script 2、定义一个下拉框

1、首先引入formSelects相关配置：引入formSelects-v4的js、css，如果采用第三步的方式引入也是可以的，这里推荐第三步layui.config方式引入。

<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>