layui中表单各个元素的事件监听

最新推荐文章于 2024-05-30 11:27:58 发布
最新推荐文章于 2024-05-30 11:27:58 发布
阅读量2.1k 收藏 1
点赞数 1
分类专栏： # form 文章标签： js javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oCaiWen/article/details/104441592
版权

SELECT下拉框的监听：

HTML部分：

	<select name="shaiXuan" class="ShaiXuan" lay-filter="ShaiXuan">
		<option value ="0">手机号</option>
		<
最低0.47元/天 解锁文章
oCaiWen
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
LayUI学习笔记
qq_43496887的博客
10-24 394
目录 一、基本模板 二、栅格布局 一、基本模板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>开始使用 layui</title> <link r
Layui的事件监听
weixin_44556271的博客
06-09 7867
开发工具与关键技术：vs mvc 作者 撰写时间：2019年6月 6日 在这里主要是说的是layui的事件监听部分，那么目前用的是2.x以上的版本，在这些版本中对数据表格进行了很大的优化，以越来越好用了，在layui中事件监听的语法是table.on(‘event(fiter)’,callback),event为内置事件名，filter是容器设定的值，这个模块在layui有专属的事件，在一般情况下...
【前端】Layui的表格常用功能，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件
小5聊的博客
03-27 3968
最近在维护老系统，尽量使用过layui，但是时间久了，总会忘记一些方法的使用。 因此通过本篇文章大概记录常用的功能方法，比如，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件等
layui监听当前页_layui事件监听使用
weixin_39603537的博客
12-22 499
在使用layui的form表单做验证提交的时候，如果结合vue，或者是三级联动的时候，就需要做事件监听了。具体语法：form.on('event(过滤器值)', callback);可以用于监听：select，checkbox，switch，radio，submit 的改变一、监听select的改变下拉选择框写作阅读听歌游戏layui.use('form', function(){var form...
layui select 动态渲染 监听事件
Acitylion的博客
01-04 1072
一定要包裹在form表单中如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能 <form class="layui-form" action="" style="display: flex"> <div class="layui-form-item"> ...
【前端】layui table表格勾选事件，以及常见模块
小5聊的博客
04-13 1895
layui table表格勾选事件，以及常见模块
button layui 点击事件_Layui前端框架中的Button添加Click事件
weixin_27744023的博客
02-15 5363
引言button点击事件有一个type属性，默认type是submit，有时候使用默认会出现页面自动刷新问题。确定Internet Explorer 的默认类型是 "button"，而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。这样造成了页面自动刷新。确定原因分析：button,input type=button按钮在IE和w3c，firefox浏览器区别：当在IE浏览器下面时...
Layui前端框架中的Button添加Click事件
像蚂蚁一样工作，像蝴蝶一样生活
02-11 4498
　　引言 　　button点击事件有一个type属性，默认type是submit，有时候使用默认会出现页面自动刷新问题。 <button class="btn btn-primary" id="btnSubmit" name="btnSubmit"><i class="fa fa-save"></i>确定</button> 　　In...
Layui-页面元素规范与说明
weixin_57725431的博客
11-29 1410
Layui提倡返璞归真，遵循于原生态的元素书写规则，所以通常而言，你仍然是在写基本的HTML和CSS代码，不同的是，在HTML结构上及CSS定义上需要小小遵循一定的规范。 CSS内置公共基础类 类名（class） 说明 布局 / 容器 layui-main 用于设置一个宽度为 1140px 的水平居中块（无响应式） layui-inline 用于将标签设为内联块状元素 layui-box 用于排除一些UI框架（如Bootstrap）强制将全部元素设为box
Layui事件监听的实现(表单和数据表格)
10-16
主要介绍了Layui事件监听的实现(表单和数据表格)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
对layui中表单元素的使用详解
01-19
<div class=layui-input-block> <input type=radio name=sex value=0 title=男> ，class属性是固定写法。 这样写好了以后，你如果是写在静态页面，这样式可以看见效果，如果写在js里，这样写了还有一步得写，...
解决layui中的form表单与button的点击事件冲突问题
10-18
今天小编就为大家分享一篇解决layui中的form表单与button的点击事件冲突问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1086
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1061
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 334
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 145
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
React-useState
weixin_46479909的博客
05-29 212
本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（useState是一个React Hook（函数），它允许我们向组件添加一个。，从而控制影响组件的渲染结果。
layui下拉表单监听
06-02
要监听layui下拉表单的选择事件，可以通过layui的form模块来实现。 首先，需要引入layui的form模块： ```html <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> ``` 然后，在页面加载完成后，需要初始化form模块： ```html <script> layui.use('form', function(){ var form = layui.form; // TODO: 在此处编写监听代码 }); </script> ``` 接着，可以通过form模块的`on`方法来监听下拉表单的选择事件： ```html <script> layui.use('form', function(){ var form = layui.form; form.on('select', function(data){ console.log(data.value); // 打印用户选择的选项的值 }); }); </script> ``` 在这个例子中，当用户选择下拉表单的选项时，将会触发`form.on('select', function(data){})`中的回调函数。`data`参数包含用户选择的选项的值，可以通过`data.value`来获取。 当然，你也可以给下拉表单设置一个`lay-filter`属性，然后在`form.on`方法中指定相应的`filter`来监听该下拉表单的选择事件。例如： ```html <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">城市</label> <div class="layui-input-inline"> <select name="city" lay-filter="city"> <option value="">请选择城市</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> </select> </div> </div> </form> <script> layui.use('form', function(){ var form = layui.form; form.on('select(city)', function(data){ console.log(data.value); // 打印用户选择的城市的值 }); }); </script> ``` 在这个例子中，我们给下拉表单设置了一个`lay-filter="city"`的属性，并在`form.on`方法中指定了`select(city)`的`filter`，这样就可以监听该下拉表单的选择事件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值