layui表单select框同时支持下拉和输入的解决方案

简介: layui表单select框同时支持下拉和输入的解决方案

<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></select></div>


关键代码

lay-search,是实现输入的关键。

监听下拉框

    //获取单位;
    $.get('./api/api.php?act=getMemberDepart&token=3cab7ce4142608c0f40c785b5ab5ca24', {}, function (res) {
      var memberHtml = ''
      for (var i = 0; i < res.data.length; i++) {
        memberHtml += '<option value="' + res.data[i].member_id +  ',' + res.data[i].member_depart + '" >' + res.data[i].member_depart + '</option>'
      }
      $('#member_depart').append(memberHtml);
      form.render();
      //监听下拉框
      form.on('select(member_depart)', function (data) {
        var txt = $("#member_depart option:selected").text();//获取select选中的值
        $('.member_depart').html(txt);
      });
    }, 'json');


关联菜单

在监听下拉框代码块中,输入关联菜单函数即可。

  //监听下拉框
      form.on('select(member_depart)', function (data) {
        var txt = $("#member_depart option:selected").text();//获取select选中的值
        $('.member_depart').html(txt);
        //获取关联部门;
        var member_id = $("#member_depart").val().split(",")[0];
        getBranch(member_id);
      });


lockdatav Done!

相关文章
|
JSON 前端开发 JavaScript
javascript:layui实现定位、查询数据以及select筛选的组合功能
javascript:layui实现定位、查询数据以及select筛选的组合功能
524 0
|
前端开发 JavaScript 数据库
layui联动菜单搜索select表单选项的设置方法
layui联动菜单搜索select表单选项的设置方法
1012 0
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
628 0
|
存储 缓存 自然语言处理
ElasticSearch高阶使用
ElasticSearch高阶使用
Layui 内置方法 - layer.confirm(询问框)
Layui 内置方法 - layer.confirm(询问框)
1861 0
|
JavaScript 算法 前端开发
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
2786 0
|
前端开发 JavaScript API
Layui的CRUD(增删改查)
Layui的CRUD(增删改查)
256 0
|
数据格式
Layui中table数据表格使用方法渲染 返回的数据不符合规范,正确的成功状态码应为:“code“: 0异常处理
Layui中table数据表格使用方法渲染 返回的数据不符合规范,正确的成功状态码应为:“code“: 0异常处理
1564 0
|
JavaScript 前端开发
layui下拉框xm-select自定义搜索使用方法
【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和实时更新数据。通过这些步骤,可实现灵活的下拉框搜索功能。
2974 1
|
存储 前端开发 JavaScript
WEB前端开发中如何实现大文件上传?
WEB前端开发中如何实现大文件上传?
1311 3
WEB前端开发中如何实现大文件上传?