联动菜单用于需要使用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!
