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引用对象的方法
Jan 11 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
基于jQuery的表格操作插件
Apr 22 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
JS中作用域以及变量范围分析
Jul 18 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冒泡排序算法的深入理解
2013/06/09 PHP
jQuery学习基础知识小结
2010/11/25 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
python进程管理工具supervisor使用实例
2014/09/17 Python
python多线程操作实例
2014/11/21 Python
python3抓取中文网页的方法
2015/07/28 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
后勤人员自我鉴定
2013/10/20 职场文书
经济与贸易专业应届生求职信
2013/11/19 职场文书
推荐信怎么写
2014/05/09 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
525心理活动总结
2014/07/04 职场文书
校车安全责任书
2014/08/25 职场文书
个人委托书怎么写
2014/09/17 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
优秀班主任材料
2014/12/16 职场文书
感谢信模板大全
2015/01/23 职场文书
班主任寄语2015
2015/02/26 职场文书
小学重阳节活动总结
2015/03/24 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
行政处罚事先告知书
2015/07/01 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
Python实现双向链表
2022/05/25 Python