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 可以拖动的DIV(二)
Jun 26 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
JavaScript实现音乐播放器
Aug 14 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
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
php实现网站插件机制的方法
2009/11/10 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
php抽奖小程序的实现代码
2013/06/18 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
python解析含有重复key的json方法
2019/01/22 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
深入浅析python的第三方库pandas
2020/02/13 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
食品营养与检测应届生求职信
2013/11/08 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
市场部经理岗位职责
2015/02/02 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python