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中null与undefined分析
Jul 25 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
vue配置多页面的实现方法
May 22 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 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数据库操作面向对象的优点
2006/10/09 PHP
php中的数组操作函数整理
2008/08/18 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
Python函数式编程指南(二):从函数开始
2015/06/24 Python
python批量制作雷达图的实现方法
2016/07/26 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
岳父生日宴会答谢词
2014/01/13 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
7个关于Python的经典基础案例
2021/11/07 Python
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技