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 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
建立动态的WML站点(二)
2006/10/09 PHP
javascript 函数使用说明
2010/04/07 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
Python json模块使用实例
2015/04/11 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
详解Django 时间与时区设置问题
2019/07/23 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
Servlet面试题库
2015/07/18 面试题
自我推荐书
2013/12/04 职场文书
人事助理自荐信
2014/02/02 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
银行实习推荐信
2015/03/27 职场文书
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js