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一些不错的函数脚本代码
Sep 10 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
举例详解Python中的split()函数的使用方法
2015/04/07 Python
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
初中同学聚会感言
2014/02/11 职场文书
开业主持词
2014/03/21 职场文书
网站美工岗位职责
2014/04/02 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
解析MySQL binlog
2021/06/11 MySQL
MySQL池化框架学习接池自定义
2022/07/23 MySQL