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

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

一级菜单

	
		选择单位
		浙江大学
		宁波大学
		复旦大学
		深圳大学
		北师大附中
	

其中深圳大学中的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会进行控制台报错，无法分离","。

解决方案是默认选项中，直接设置为选择单位，即可解决

编辑状态如何实现选择

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

		//默认加载,获取同部门同设备下的IP池;
		$.get('./api/api.php?act=getIPLists&token=3cab7ce4142608c0f40c785b5ab5ca24', {
			branch_id: branch_id,
			major_id: major_id
		}, function (res) {
			var memberHtml = '';
			memberHtml += ''+pool_address+'';
			for (var i = 0; i ' + res.data[i].pool_address + ''
			}
			$('#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 += ''+pool_address+'';在ajax的选项中，从后台读取数据库中现存的数据字段直接予以显示，然后再select进行交互。

lockdatav Done!