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数据缓存系统实现代码
Oct 24 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
微信小程序中weui用法解析
Oct 21 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读取excel文件的简单实例
2013/08/26 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
图片自动更新(说明)
2006/10/02 Javascript
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
用Python抢过年的火车票附源码
2015/12/07 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
python利用微信公众号实现报警功能
2018/06/10 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
详解用python写一个抽奖程序
2019/05/10 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
怎么写好自荐信
2013/10/30 职场文书
国旗下演讲稿
2014/05/08 职场文书
伦敦奥运会口号
2014/06/13 职场文书
红旗渠导游词
2015/02/09 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python