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-searchoption value=""选择单位/option/select/div 关键代码 lay-search,是
<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);
});
沃梦达教程
本文标题为:layui表单select框同时支持下拉和输入的解决方案
基础教程推荐
猜你喜欢
- javascript中bind函数的作用实例介绍 2023-12-01
- Firefox返回时Iframe的显示Bug的解决方法 2024-04-23
- Ajax工作原理及优缺点实例解析 2023-02-23
- ajax无刷新分页的简单实现 2022-12-28
- CSS动画翻转:让网页更动感 2023-10-08
- 用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案) 2023-01-31
- 基于HTML5+tracking.js实现刷脸支付功能 2024-02-11
- js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换X函数代码 2023-08-08
- 解决Ajax加载JSon数据中文乱码问题 2023-02-14
- AjaxFileUpload结合Struts2实现多文件上传(动态添加文件上传框) 2023-02-14