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 相关文章推荐
JavaScript 继承详解 第一篇
Aug 30 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
vue弹窗消息组件的使用方法
Sep 24 Javascript
Vue中props的详解
May 16 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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
一个程序下载的管理程序(四)
2006/10/09 PHP
php仿ZOL分页类代码
2008/10/02 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
PHP函数积累总结
2019/03/19 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
vue实现分页组件
2020/06/16 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
Python ljust rjust center输出
2008/09/06 Python
Python MD5加密实例详解
2017/08/02 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
Python中最大递归深度值的探讨
2019/03/05 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
英文简历中的自我评价
2013/10/06 职场文书
小学教师管理制度
2014/01/18 职场文书
学校大课间活动方案
2014/01/30 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
向女朋友道歉的话
2015/01/20 职场文书
高三数学教学反思
2016/02/18 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书