layui框架实战案例(23)：select编辑回显内容及事件调用

news2024/10/6 5:56:02

layUI框架实战案例系列文章

layui框架实战案例(21)：layui上传的哪些事(layui.upload组件、 file文件域、php后台上传)
layui框架实战案例(20)：常用条件判断和信息展示技巧(图片预览、动态表格、短信已读未读、链接分享、信息脱敏、内置框架页)
layui框架实战案例(19)：layui-table模块表格综合应用（筛选查询、导入导出、群发短信、一键审核、照片展示、隐私加密）
layui框架实战案例(18)：保存草稿和单选radio复选框checkbox无focus属性快速聚焦跳转的解决方案
layui框架实战案例(17)：流加载文档layui.flow组件的前后端解决方案
layui框架实战案例(16)：xm-select下拉多选插件实战记录（远程搜索、过滤、翻页、单选、提示文字）
layui框架实战案例(15)：上传提示413 request entity too large宝塔配置的解决方案
layui框架实战案例(14)：tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
layui框架实战案例(13)：colorpicker颜色选择器的使用
layui框架实战案例(12)：layui标签输入框inputTag
layui框架实战案例(11)：表单自定义验证规则
layui框架实战案例(10)：短信验证码60秒倒计时
layui框架实战案例(9)：layPage 静态数据分页组件
layui框架实战案例(8)：web图片裁切插件croppers.js组件实现上传图片的自定义截取(含php后端)
layui框架实战案例(7)：时间范围选择及时间处理的解决方案
layui框架实战案例(6)：上传图片和视频自动调用IOS或安卓系统的摄像头功能
layui框架实战案例(5)：基于PHP后端的layUI上传视频到七牛云对象储存并自动转码
layui框架实战案例(4)：因内容安全策略导致弹出层模态框无法正常显示微信公众号文章使用window.open的解决方案
layui框架实战案例(3)：layui上传错误请求上传接口出现异常解决方案
layui框架实战案例(2)：layui文件上传PHP后台参数获取方式及JSON返回格式
layui框架实战案例(1)：layui组件table异步加载数据结合php后台动态翻页的解决方案

其他目录

layui动态表格翻页和搜索的代码分析
layui实现定位、查询数据以及select筛选的组合功能
layui多文件上传与PHP后端对接的解决方案
layui内部表单互动的实战案例：根据radio单选框自动改变input内容
layui复选框checkbox全选和获取值的解决方案
layui和weui结合手机端select表单底部选择和被遮挡的解决方案

select编辑回显内容及事件调用

layUI框架实战案例系列文章
回调函数
form.on事件

在这里插入图片描述

回调函数

设置参数传递，即当传值且与选择名称一致时，设置selected属性。

  if (origin && origin == res.data[i].region_name) {}


/*编辑回显*/
function getPoiArea(origin) {
    $.ajax({
        type: 'get',
        async: true,
        data: {},
        url: './api/api.php?act=getSearchRegion&token=3cab7ce4142608c0f40c785b5ab5ca24',
        dataType: "json",
        success: function (res) {
            //console.log(res.data)
            var html = "<option value=''>选择区域</option>";
            if (res.data) {
                for (var i = 0; i < res.data.length; i++) {
                    if (origin && origin == res.data[i].region_name) {
                        html += ' <option value="' + res.data[i].region_name + '" selected>' + res.data[i].region_name + '</option>'
                    } else {
                        html += ' <option value="' + res.data[i].region_name + '">' + res.data[i].region_name + '</option>'
                    }
                }
            }
            $("#poi_area").html(html);
            layui.form.render("select");
        },
        error: function (err) {
            console.log(err + "请求数据失败!");
        }
    });
}

form.on事件

layui中的form.on事件是一个表单元素的事件监听器，可以监听表单元素的交互事件，如点击、选择、输入等。其用法类似于jQuery的on方法，可以传入一个选择器和回调函数，实现对表单元素的事件监听。

具体操作步骤如下：

在HTML代码中引入layui库，并在需要使用的元素上添加相应的class。例如，可以在form表单中的按钮上添加一个class为layui-btn的属性，用来定义按钮的样式。
在JavaScript代码中使用layui.use方法来加载相应的模块，同时使用form.on方法来监听按钮的点击事件。
在监听方法内部，可以编写按钮点击后的逻辑处理代码，同时通过data.field获取表单数据。

//筛选设计;
        form.on("select(designer)", function (data) {
            var index = data.value.split(',');
            $("#des_phone").val(index[1]);
        });