网站首页 > 知识剖析 正文
1、概述
主要讲解layui如何监听Select的变化,以及获取Select内容的相关值
2、基本Html
<div class="layui-form">
<div class="layui-row">
<div class="layui-col-md4">
<select name="aiHao" id="aiHao" lay-filter="aiHao-filter">
<option value="1">篮球</option>
<option value="2">足球</option>
<option value="3">台球</option>
</select>
</div>
</div>
</div>
3、监听Select的Change事件
layui.use(["form"], function() {
var form = layui.form;
form.on("select(aiHao-filter)", function (e) {
//当前选择的索引
var elem = e.elem;
//得到选择的几个索引
var index = elem.selectedIndex;
console.log("选择了第几个:",index);
var text = elem[elem.selectedIndex].text;
var value = e.value;
console.log("当前text与value值是:",text,value);
});
});
代码说明:
form.on("select(aiHao-filter)" 表单来监听过滤器 lay-filter的Select控件。回调函数中的 e.
e.elem 表示是当前的元素
e.elem.selectedIndex表示是选择了第几个元素
e.value表示当前选择了哪一个select的option的值value值
elem[elem.selectedIndex].text 表示选择了哪一个select的option的值text值
4、Select动态渲染
渲染的语法
form.render(type, filter);
type为select,checkbox,radio等
filter是select,checkbox,radio对应的lay-filter过滤器名称
说明
动态对select赋值option的选项时,需要使用form.render()进行重新渲染
比如有两个select,第一个select 在改变的时候,重新渲染第二个select的option的值
代码如下
//每一个Select在Change的时候,根据每个select的value值来初始化第二个Select控件的值。
动态初始化的时候,需要调用form.render()进行控件的重新渲染
form.on('select(CateInfoCode-Filter)', function(e) {
var parentCode = e.value;
var url = "/MemberXxx/GetChildCate?ParentCode=" + parentCode;
var param = {};
ajaxSyncPost(url, param, function(data) {
$("#childCateInfoCode").html("");
$("#childCateInfoCode").append("<option value=''>-请选择-</option>");
$.each(data, function(i, item) {
var selectedInfo = "";
if (curCateCode === item.Code) {
selectedInfo = "selected='selected'";
}
var option = "<option value='"+item.Code+"' "+selectedInfo+">"+item.CateInfoName+"</option>";
$("#childCateInfoCode").append(option);
});
form.render("select");
});
猜你喜欢
- 2025-07-06 CSDN免登陆复制代码的几种方法(csdn扫码登录怎么实现的)
- 2025-07-06 用 Playwright MCP 让 AI 改它自己写的屎山代码
- 2025-07-06 multiple-select.js中手动设置全选和取消全选
- 2025-07-06 前端实现右键自定义菜单(html 自定义右键菜单)
- 2025-07-06 JavaScript脚本如何断言select下拉框的元素内容?
- 2025-07-06 广州蓝景分享—实用的CSS技巧,助你成为更好的前端开发者
- 2025-07-06 MyBatis-Plus码之重器 lambda 表达式使用指南,开发效率瞬间提升80%
- 2025-07-06 Go语言之select的使用和实现原理(go select case)
- 2025-07-06 Layui 框架实战:动态加载 Select 与二级联动全解析
- 2025-07-06 Dify「模板转换」节点终极指南:动态文本生成进阶技巧(附代码)Jinja2引擎解析
- 最近发表
-
- jQuery EasyUI使用教程:创建展开行详细编辑表单的CRUD应用
- CSDN免登陆复制代码的几种方法(csdn扫码登录怎么实现的)
- LayUi提高-Select控件使用(layui form select)
- 用 Playwright MCP 让 AI 改它自己写的屎山代码
- multiple-select.js中手动设置全选和取消全选
- 前端实现右键自定义菜单(html 自定义右键菜单)
- JavaScript脚本如何断言select下拉框的元素内容?
- 广州蓝景分享—实用的CSS技巧,助你成为更好的前端开发者
- MyBatis-Plus码之重器 lambda 表达式使用指南,开发效率瞬间提升80%
- Go语言之select的使用和实现原理(go select case)
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)