layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)


Posted in Javascript onSeptember 24, 2019

因为本身layui是有一套自身的监听方式,form.on   当然你是先将select放入<div class="layui-form">中,不然都显示不出select

里面也有监听普通下拉选框选中值发生改变的方式,直接复制即可

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>监听下拉选框</title>
  <link rel="stylesheet" href="//layui.hcwl520.com.cn/layui/css/layui.css?v=201809030202" rel="external nofollow" >
</head>
<body>
 
<div class="layui-form">
  <div class="layui-inline">
    <div class="layui-inline">
      <label class="layui-form-label">layui监听下拉选框</label>
      <div class="layui-input-inline layui-input-inline-add">
        <select id="Select" lay-filter="Select" name="aaa" lay-search="">
          <option value="0">1</option>
          <option value="1">2</option>
          <option value="2">3</option>
        </select>
      </div>
    </div>
  </div>
</div>
 
<h3 style="margin-top: 50px;">普通监听下拉选框</h3>
<select name="" id="common" style="height: 35px;width: 200px;margin-left:110px;">
  <option value="0">1</option>
  <option value="1">2</option>
  <option value="2">3</option>
</select>
 
 
 
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
<script src="//layui.hcwl520.com.cn/layui/layui.js?v=201809030202"></script>
<script>
  layui.use(['form','layer'],function () {
    var form=layui.form;
    var layer=layui.layer;
    form.on('select(Select)',function(data){
      layer.msg('监听到下拉选框选中值发生改变')
    });
  })
 
  $("#common").on('change',function () {
    alert('监听到下拉选框选中值发生改变')
  })
</script>
</body>
</html>

以上这篇layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
node在两个div之间移动,用ztree实现
Mar 06 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
js正则匹配多个全部数据问题
Dec 20 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 #Javascript
JavaScript RegExp 对象用法详解
Sep 24 #Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 #Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 #Javascript
关于layui时间回显问题的解决方法
Sep 24 #Javascript
Vue之Mixins(混入)的使用方法
Sep 24 #Javascript
JavaScript Array对象使用方法解析
Sep 24 #Javascript
You might like
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
python引用DLL文件的方法
2015/05/11 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
python 日志 logging模块详细解析
2020/03/31 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
计算机专业毕业生自我鉴定
2014/01/16 职场文书
公司委托书格式范文
2014/04/04 职场文书
项目建议书怎么写
2014/05/15 职场文书
社区清明节活动总结
2014/07/04 职场文书
学习十八大宣传标语
2014/10/09 职场文书
学校少先队工作总结
2015/08/12 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL