layui联动菜单搜索select表单选项的设置方法-CFANZ编程社区

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