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 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
jQuery的框架介绍
May 11 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 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你的验证码安全码?
2007/01/02 PHP
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
Using the TextRange Object
2006/10/14 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
浅析node.js中close事件
2014/11/26 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
python实现一次创建多级目录的方法
2015/05/15 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
无毒社区工作方案
2014/05/23 职场文书
房产电话营销开场白
2015/05/29 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
python实现自动化群控的步骤
2021/04/11 Python
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技