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!

相关文章
|
前端开发 JavaScript 数据库
layui联动菜单搜索select表单选项的设置方法
layui联动菜单搜索select表单选项的设置方法
585 0
|
JavaScript 算法 前端开发
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
839 0
|
4月前
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
203 1
|
4月前
Element UI 多选表格【翻页多选】全能版(含翻页多选数据反显、toggleRowSelection失效的原因解析和解决方案)
Element UI 多选表格【翻页多选】全能版(含翻页多选数据反显、toggleRowSelection失效的原因解析和解决方案)
307 0
|
4月前
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ?
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ?
233 0
|
6月前
textarea文本框根据输入内容自动适应高度
textarea文本框根据输入内容自动适应高度
92 0
|
6月前
el-select如何自定义下拉选项框的宽度
el-select如何自定义下拉选项框的宽度
908 0
|
JSON JavaScript 数据库
vue搜索表格功能,根据input输入框和下拉框传递的参数进行搜索
vue搜索表格功能,根据input输入框和下拉框传递的参数进行搜索
125 1
通过select下拉框里的value控制div显示与隐藏
通过select下拉框里的value控制div显示与隐藏
81 0
Layui表格头部工具栏取消默认的三个功能
Layui表格头部工具栏取消默认的三个功能
492 0
Layui表格头部工具栏取消默认的三个功能