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 相关文章推荐
chrome下img加载对height()的影响示例探讨
May 26 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 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 上传功能实例代码
2010/04/13 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
JavaScript中的undefined学习总结
2013/11/30 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
Django中处理出错页面的方法
2015/07/15 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
详解Flask前后端分离项目案例
2020/07/24 Python
Django Form常用功能及代码示例
2020/10/13 Python
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
总经理职责范文
2013/11/08 职场文书
委托书格式范文
2015/01/28 职场文书
接收函格式
2015/01/30 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
党性修养心得体会2016
2016/01/21 职场文书
安全责任协议书范本
2016/03/23 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL