layui切换select选项事件
说明
我们经常遇到表单上面选择不同的下拉选项需要触发函数去完成一些业务逻辑,比如我这个地方根据所选商品查询它底下明细的数量,并展示。
效果演示

代码
<!--选择商品-->
<div class="layui-form-item">
<label class="layui-form-label">商品</label>
<div class="layui-input-block">
<select id="goodsId" name="goodsId" lay-verify="required" lay-filter="goodsId">
<option value="">--选择商品--</option>
</select>
<div class="layui-unselect layui-form-select">
<div class="layui-select-title">
<input type="text" placeholder="请选择" value="" readonly=""
class="layui-input layui-unselect">
<i class="layui-edge"></i>
</div>
</div>
</div>
</div>
// 监听商品更改事件
form.on('select(goodsId)', function(e) {
$.ajax({
type: "GET",
url: ctx+'goods/kmtj/'+$("#goodsId").val(),
success: function (result) {
$('#kmtj').val('总计:'+result.data.total+'张|剩余:'+result.data.left+'张');
}
})
})
layui切换select选项事件的更多相关文章
- 使用layui的form.on绑定select选中事件, form.on()不执行的原因分析
使用layui的form.on绑定select选中事件中, form.on()不执行, 主要原因有 1, select标签中没有写lay_filter属性,用来监听 <select id=&qu ...
- layui中select实现二级关联
目的:实现店铺和仓库的二级关联,通过选择不同的店铺,来显示这个门店对应的库位信息. 1. 在select选项上添加lay-filter选择器. <div class="layui-in ...
- 动态获取后台传过来的值作为select选项
问题描述:点击左侧菜单项,进入对应的具体页面a.html,页面上方有个select框,点击框后,会浮现选择项. 解决思路:对左侧菜单项添加一个onclick事件,进入后台做具体的查询,将查询到的lis ...
- Jquery操作select选项集合,判断集合中是否存在option
转载:http://www.cnblogs.com/pepcod/archive/2012/07/03/JavaScript.html Query获取Select选择的Text和Value: 语法解释 ...
- jquery事件之select选中事件
根据select下拉列表选中的不同选项执行不同的方法,工作中经常会用到,这里就要用到Jquery的select选中事件 这里给select加一个叫label_id的id,然后通过id选择器找到这个节点 ...
- select 选项的子句
select 选项 : 关键字 all :全部(默认值)distinct:去掉重复的查询结果.语法:select all * from 表名: 别名: 关键字:as 语法:select * from ...
- js获取select改变事件
js获取select改变事件onchage前的值 和 onclick事件 <select id="wupin_id" name="wupin_id" on ...
- js 触发select onchange事件
select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,本文为大家介绍下使用js触发select onchange事件select 或text的o ...
- select change事件给其它元素赋值,本select的value或tex
select change事件给其它元素赋值,本select的value或textonchange='$("#areaname").val($("option:selec ...
- layui之select的option叠加问题解决
小编我在使用layui,在select的地方遇到了坑,select里的值居然无法清空,select里的option还有叠加问题,为了解决这个问题,也达到我的功能,我研究了下,让有同样需求的小伙伴不踩坑 ...
随机推荐
- css - 伪元素清除浮动
.clearfix:after{ content:""; /*设置内容为空*/ height:0; /*高度为0*/ line-height:0; /*行高为0*/ display ...
- JMS微服务项目模板
项目模板下载地址 vs2022模板:JMS.MicroServiceProjectTemplate2022.zip vs2019模板:JMS.MicroServiceHost.zip 说明 把压缩包解 ...
- Docker-02应用部署案例
1.Docker部署mysql 拉取mysql镜像 # 查询mysql镜像 docker search mysql # 拉取镜像命令 docker pull centos/mysql-57-cento ...
- window-子系统-ubuntu
window-子系统-ubuntu 1. 背景 提供类Linux开发环境(命令行.文件系统.进程管理.网路) 2. 安装 A. wsl 安装 下载链接: https://wslstorestorage ...
- [转帖]centos6 free 和 centos 7的free 的差异与对比
目录 一 centos6 free 常用参数和含义 centos6 free 命令示例 free 值讲解 计算公式 二 centos7 free 常用的参数 centos7 free 命令示例 计算公 ...
- [转帖]麒麟v10上部署TiDBv5.1.2生产环境的最佳实践
https://tidb.net/book/tidb-monthly/2022/2022-07/usercase/tidb-v5-1-2 前言 笔者最近在一个银行项目中做 PoC 测试,由于客户选择 ...
- [转帖]nginx 反向代理中proxy_set_header的含义
https://www.jianshu.com/p/cd813d68ed25 0.1212020.10.23 09:29:53字数 284阅读 9,939 1.proxy_set_header设置的请 ...
- 【转帖】查看mysql库大小,表大小,索引大小
https://www.cnblogs.com/lukcyjane/p/3849354.html 说明: 通过MySQL的 information_schema 数据库,可查询数据库中每个表占用的空间 ...
- 【转帖】route命令详解大全(route命令使用实例)
https://www.cxdtop.cn/n/225987.html 在实际的网络应用中,我们可能会遇到这样的网络环境,上外网我们使用的无线网络,内网我们使用的是有限网卡.在设置完成后会出现外网和内 ...
- [转帖]Linux性能调优之内存负载调优的一些笔记
https://zhuanlan.zhihu.com/p/548770928 写在前面 整理一些Linux内存调优的笔记,分享给小伙伴 博文没有涉及的Demo,理论方法偏多,可以用作内存调优入门 博文 ...