layui-select动态选中值的例子
作者:开源拾贝时间:2026-10-24 01:55:07浏览:531
本文介绍在layui表单渲染后,如何通过操作隐藏的原生input及添加layui-this样式,实现select选项的动态选中。针对Vue动态绑定失效场景,提供了在Table编辑时恢复选中状态的具体代码逻辑与注意事项。
layui-select动态选中值的例子
layui执行form渲染操作后,会重构DOM结构并将原生select元素隐藏。
采用vue动态绑定options时,直接绑定v-model会导致失效。
需求是在编辑特定行时,动态设置select的选中值。
第一步需要更新对应input元素的显示文本值。
第二步需为新构建的select元素添加layui-this样式以标识选中状态。
在table编辑场景下的具体实现代码如下:
var $div = $("#categoryParentCode").next();
$div.find('.layui-this').removeClass('layui-this');
var parentCode = row.data.ParentCode;
if(parentCode!==""){
$div.find('div input').val(parentCode);
$div.find('dl dd[lay-value="'+parentCode+'"]').addClass('layui-this');
}else{
$div.find('div input').val("");
}
通过上述逻辑即可实现动态选中效果。
当前layui使用的版本号为:2.2.45
本文分享的layui-select动态选中值示例到此结束,仅供参考与支持。
作者最新文章
JS 怎么使用 pako.js 解压 gzip 数据流
2026-11-05 15:54:33
零基础先学JavaScript还是Python?对比学习难度与上手曲线
2026-11-05 14:47:40
JS代码反混淆:主流在线工具与本地软件推荐
2026-11-04 19:28:41
浏览器控制台查看格式化JSON有哪些实用技巧
2026-11-04 16:56:53
JS控制台打印基础:console.log语法与多参数用法
2026-11-04 09:23:11
