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 相关文章推荐
js实现刷新iframe的方法汇总
Apr 27 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
javascript基础知识讲解
Jan 11 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 Javascript
js代码编写无缝轮播图
Sep 13 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抓取并保存网站图片的实现代码
2015/10/28 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
PHP7 标准库修改
2021/03/09 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python快速排序算法实例分析
2017/11/29 Python
selenium+python实现自动登录脚本
2018/04/22 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
英国电信商店:BT Shop
2019/12/17 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
餐饮投资计划书
2014/04/25 职场文书
节能环保口号
2014/06/12 职场文书
护士医德考评自我评价
2015/03/03 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
北京青年观后感
2015/06/15 职场文书
运动会100米广播稿
2015/08/19 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers