使用layui监听器监听select下拉框，事件绑定不成功

已于 2022-05-26 15:54:13 修改
阅读量2.9w 收藏 23
点赞数 14
分类专栏： java java学习 文章标签： layui
于 2018-08-24 13:15:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/QYHuiiQ/article/details/82016425
版权

使用layui监听select所选的value

需要注意的是：form.on必须写在layui.use(){

}中

且使用layui动态添加option时，必须要进行渲染（form.render()），否则选项追加不上

这样做完之后如果还不能获取select所选的value，那就需要检查一下select所在的form表单有没有写class属性，如果没有写class属性，就监听不到select

如果在完成后台操作之后跳转页面时不显示样式了，就检查一下请求路径resultmapping后面不要加/，否则它在找ximnd.css以及layui.css时路径是不对的

layui 监听select选择 获取当前select的ID名称方法
12-13
监听select选择 form.on('select(filter)', function(data){ console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 console.log(data.othis); //得到美化后的DOM对象 }); 获取自定义属性 data.elem.getAttribute("data-id") 例子：取得ID名称 form.on('select', function(data){ //console.log(data.elem); //得到se
layui 监听Select
chidi3832的博客
06-07 604
要实现联动效果注意两点： 第一要可以监听到select的change事件； 第二异步加载的内容，需要重新渲染后才可以 正常使用。 html结构： <form class="layui-form batchinput-form" action="" id="box-form"&g...
layui-下拉框多选取值(完整示例)
最新发布
qq_50856002的博客
02-11 821
layui-下拉多选框取值的实现 三.~~~~~~~~~~~看官留下脚步~如果帮助到你喽帮忙点赞收藏哦~~~~~~~~~~~
[Layui] select监听 form.on(‘select(XXX)‘,function(){})；
weixin_46099170的博客
08-28 3332
layui 框架中使用 form.on 方法监听select 选中事件。
LayUI之select监听事件
千羽公子的专栏
09-17 2848
看着layui是比较简单的东西，只一个监听事件，搞得晕头转向的，主要还是对这个东西不太熟悉，而且项目中都是封装的东西，有些不太好找。 需求：选择select的时候，获取不同的值。 //lay-filter="test" 用来过滤要监听的select <form class="layui-form"> <div class="layui-form-i...
layui-监听select事件
weixin_43244841的博客
05-25 4817
HTML部分 (lay-filter=“demo”) <div class="layui-form-item layui-hide"> <label class="layui-form-label">动物级别</label> <div class="layui-input-inline"> <select name="zoon_id" lay-filter="demo">
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
10-16
本文将深入探讨如何使用layui监听器监听select下拉框，并解决事件绑定不成功的问题。 首先，layui监听器的核心在于其事件绑定机制。在layui中，我们可以使用`form.on()`方法来监听form表单内的元素事件，包括select...
解决layui下拉框监听问题(监听不到值的变化)
12-13
关于layui监听下拉框值得变化，大家都知道官方文档给我们提供了一个方法 form.on('select(demo)',function(data){ console.log(data.value)//打印当前select选中的值 }) 按照我之前的理解，监听下拉框值得变化，...
layui问题之模拟select点击事件的实例讲解
10-18
1. **监听select事件**: 在layui中，可以监听select的变化事件。使用`form.on('select(filter)', function(data) {...})`方法可以监听到select的选中值变化，并可获取到相关数据。 - `data.elem` 获取select的原始...
layui 中select下拉change事件失效的解决方法
10-16
在使用layui进行Web前端开发时，开发者可能会遇到select下拉框的change事件失效的问题。本文就来详细介绍这一问题的解决方法，并深入探索lay-filter的使用和form.on方法的细节。 ### 解决方法概述 当开发者在使用...
layui中select切换数据_LayUi- 动态表格table中下拉框Select的设置和监听
weixin_33489161的博客
01-13 1077
LayUi中动态表格中可以使用 templet自定义列模板 对单元格添加其他元素 ，添加下拉框相对麻烦些，没有自带的。1.添加编辑器我们使用绑定模版选择器的方法：在table.render()中 指定列(cols)的templet属性，并添加模板的html代码，例如：{ rowspan: 2, title: '新建及改造工作状态', templet: '#editState' }未开工在建完工已验...
Layui监听Select
03-10 537
在使用Layui的Select组件时，有时候需要通过Select的值去实时的做一些别的事情，这时我们可以这么做 html: <form class="layui-form" style="padding: 20px;" action="" lay-filter="example" id="example"> <div class="layui-form-item"...
layui select下拉框改变之 change 监听事件
热门推荐
麻辣香蕉
11-08 8万+
 在layui中使用 jquery 触发select 的 change事件无效   使用layui.use监听select事件           &lt;select lay-filter="demo" lay-verify="required"&gt; &lt;script&gt; layui.use(['layer', 'jquery', 'form'], function (...
layui监听select下拉选择框
WalnutLin的博客
02-26 3709
layui监听select下拉选择框1、方法一2、方法二 1、方法一 可以用 form.on('select(type)', function(data){ console.log(data.value)//选中的值 }) type为select标签中的lay-filter属性值 该方法保留了layui的样式 2、方法二 用原生js，但先要去掉layui自带的样式和js， 去掉方法：在select标签上加上lay-ignore属性 $('#type').change(function() { }）
layui下拉框监听点击
qq_34631220的博客
12-02 2135
<div class="layui-form-item"> <label class="layui-form-label" style="width:100px">选择任务</label> <div class="layui-input-block"> <select id="library" name="library" lay-filter="aihao" lay-search=""> .
layui中使用JavaScript监听下拉框（select）的变化，根据选中的值来决定是否显示或隐藏input元素
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
09-26 4538
HTML和CSS用于设置网页的基本结构和样式，而JavaScript则用于实现交互功能，比如根据下拉框的选项来控制input元素的显示或隐藏。
layui select的监听事件写法
guzimou2的博客
04-27 742
html: <div class="layui-form-item"> <label class="layui-form-label">跳转类型</label> <div class="layui-input-inline"> <script type="text/html" template> ...
layui 无法监听 select 框解决方法
weixin_44501796的博客
09-16 811
layui form中，写入的 select 不会被渲染，layui 会创造个 input 框，把选中的 option 加一个 class="layui-this" 再渲染上去。不是很懂这样做的原因，但直接监听 select 是没用的。 给 select 加一个 lay-filtter，再用上面的方法就可以正常监听了。 ...
layui select下拉框收起的监听事件
07-12
layui是一个轻量级的前端UI库，它提供了一个便捷的方式来创建下拉框组件，包括select元素。在layui中，如果你想监听下拉框的收起事件，你可以通过`layEvent`这个选项来添加自定义的事件处理函数。 例如，在初始化select选择器时，可以设置如下的配置： ```html <select lay-filter="mySelect" lay-event="{openEnd: 'handleClose'}"> <!-- 你的选项 --> </select> <script> layui.use('layui', function(){ var layui = layui; layui.event.use('mySelect', { // 绑定到特定的select元素上 init: function(){}, handleClose: function(){ // 下拉框关闭后的回调函数，这里可以执行你需要的操作 console.log('下拉框已关闭'); } }); }); ``` 在这个例子中，`openEnd`是layui自动生成的一个表示下拉框打开结束的事件，当你传入`handleClose`作为该事件的处理器，每当用户关闭下拉框时，就会触发这个函数。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

QYHuiiQ

听说打赏的人工资翻倍~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值