LayUI 多选下拉框详细配置

需要引用的js 和css文件

<link href="~/Content/scripts/layui-formSelects/formSelects-v4.css" rel="stylesheet" />

留下qq，我私发

废话不说了，直接上代码

1.HTML代码

<!--多选下拉框HTML代码-->
<div class="layui-form-item">
	<div class="layui-inline">
		<label class="layui-form-label">单位</label>
		<div class="layui-input-inline" style="width:500px">
			<select name="ReceiveOrgan" xm-select="ReceiveOrgan" id="ReceiveOrgan">
				<option value=""></option>
			</select>
		</div>
	</div>
</div>

2.JS 代码

// 初始化搜索下拉菜单  赋值和不赋值
function GetDrop() {
	//全局定义一次, 加载formSelects
	layui.config({
		base: '/Content/scripts/layui-formSelects/' //此处路径请自行处理, 可以使用绝对路径
	}).extend({
		formSelects: 'formSelects-v4'
	});

	// 初始化不赋值
	layui.use('formSelects', function () {
		formSelects = layui.formSelects;

		formSelects.data('ReceiveOrgan', 'server', {
			url: url
		});
	});
	
	// 初始化并赋值
	layui.use('formSelects', function () {
		formSelects = layui.formSelects;
		var ltArr;
		var lt = '1,2,3,4';
		if (lt.length > 0) {
			ltArr = lt.split(',');
		}
		layui.formSelects.config('ReceiveOrgan', {
			searchUrl: url,
			success: function (id, url, searchVal, result) {
				formSelects.value('ReceiveOrgan', ltArr);
			}
		});
	});
}

3.后台方法

//后台方法
public ActionResult GetDropDown()
{
	string sql = @"select code,name from table";
	var list = DbHelper.SqlQueryForDataTatable(sql).ToDataList<Model>();
	// 多选
	var result = list.Select(t => new { name = t.name, value = t.code });
	return Content(result.ToJson());
}