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还有叠加问题,为了解决这个问题,也达到我的功能,我研究了下,让有同样需求的小伙伴不踩坑 ...
随机推荐
- WebApi的输出结果重写 OnActionExecuted
public override void OnActionExecuted(ActionExecutedContext context) { if (context.Exception != null ...
- TiDB的搭建与维护过程
TiDB的搭建与维护过程 背景 总结一下TiDB的搭建以及简单维护过程. 目标: 简单快速的创建TiDB数据库,以及进行备份恢复等工作. TiDB 简介 TiDB(全称:Ti Distributed ...
- [转帖]TiDB-unsafe recover(三台tikv宕机两台)
一.背景 名称 数量 tikv 3 副本 3 1.故障: 因为某些原因,两台tikv不可连接,出现region不能访问的故障 2.几条理论: 2.1.多副本原则 存在一半以上的副本则集群访问不受影响( ...
- [转帖]configure 各种配置
https://api.dandelioncloud.cn/article/details/1487329970564485121 -build=编译该软件所使用的平台 -host=该软件将运行的平台 ...
- 【转帖】一文解析ethtool 命令的使用
命令简介 ethtool命令用于查询和控制网络设备驱动程序和硬件设置,尤其是有线以太网设备,devname网卡的名称.网卡就像是交换机的一个端口,正常使用我们只是配置网卡IP地址等信息,网卡的速率.双 ...
- CentOS上面阿里源的设置过程
1. 移除已经有的yum仓库 #原因: 公司内部部分境外网站不能访问,会提示异常. rm -rf /etc/yum.repos.d/* 2. 使用阿里源进行处理. #主要有两个, 一个是base的一个 ...
- It is currently in use by another Gradle instance
FAILURE: Build failed with an exception. * What went wrong: Could not create service of type TaskHis ...
- vue3新特性
值得注意的新特性 1==> 组合式 API 2==> Teleport 3==> 片段 4==> 触发组件选项 5==> createRenderer API 来自 @v ...
- js解析上传APK文件的详细信息
前端解析APK版本信息 需要安装这个包,可以使用cnpm或者npm npm 安装 app-info-parser ( 命令:npm install app-info-parser) APKInfo为i ...
- 驱动开发:WinDBG 枚举SSDT以及SSSDT地址
在前面的博文<驱动开发:内核读取SSDT表基址>中已经教大家如何寻找SSDT表基地址了,今天给大家分享两个适用于WinDBG调试器上的脚本文件,该脚本文件可以很好的枚举出当前系统内的SSD ...