layui联动菜单搜索select表单选项的设置方法

联动菜单用于需要使用ajax来调用后端数据，如下图：

一级菜单

<div class="layui-input-inline">
	<select name="member_depart" lay-verify="required" id="member_depart"
	lay-filter="member_depart" style="height:10px;" lay-search="">
		<option value="">选择单位</option>
		<option value="8,浙江大学">浙江大学</option>
		<option value="7,宁波大学">宁波大学</option>
		<option value="4,复旦大学">复旦大学</option>
		<option value="2,深圳大学">深圳大学</option>
		<option value="1,北师大附中">北师大附中</option>
	</select>
</div>

其中深圳大学中的value都是id,name组成的字符串，需要在前端JS或者后端语言中对字符串进行预处理，然后才能和数据库进行有效的交互。

监听下拉框数据分离

	//监听下拉框
			form.on('select(member_depart)', function (data) {
				var txt = $("#member_depart option:selected").text();//获取select选中的值
				$('.member_depart').html(txt);

				//获取关联部门;
				//console.log($("#member_depart").val());
				if ($("#member_depart").val()){
					var member_id = $("#member_depart").val().split(",")[0];
					getBranch(member_id);
				}
			});

比如需要调用传递过来的调用函数getBranch(member_id)，来实现小类数据的调用，就需要member_id = $("#member_depart").val().split(",")[0];进行数据的split分离。
当然，这是前段不可缺少的步骤。

数据查询产生的问题

但是在进行数据查询搜索过程中，如果直接使用该方式，值不为空的情况下，都是成立的。如果为空，则split会进行控制台报错，无法分离","。

解决方案是默认选项中，直接设置为<option value=",">选择单位</option>，即可解决

编辑状态如何实现选择

如果要编辑数据，但是前端是ajax调用的，使用后端和前端语言就需要原生的混写开发了。

		//默认加载,获取同部门同设备下的IP池;
		$.get('./api/api.php?act=getIPLists&token=3cab7ce4142608c0f40c785b5ab5ca24', {
			branch_id: branch_id,
			major_id: major_id
		}, function (res) {
			var memberHtml = '';
			memberHtml += '<option value="'+pool_address+'">'+pool_address+'</option>';
			for (var i = 0; i < res.data.length; i++) {
				memberHtml += '<option value="' + res.data[i].pool_address + '" >' + res.data[i].pool_address + '</option>'
			}
			$('#pool_address').html(memberHtml);
			form.render();

			//监听下拉框
			form.on('select(pool_address)', function (data) {
				var txt = $("#pool_address option:selected").text();//获取select选中的值
				$('.pool_address').html(txt);
				//获取对应IP池信息;
				transAddress();
			});
		}, 'json');

即memberHtml += '<option value="'+pool_address+'">'+pool_address+'</option>';在ajax的选项中，从后台读取数据库中现存的数据字段直接予以显示，然后再select进行交互。

lockdatav Done!