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动态选中值示例到此结束,仅供参考与支持。

作者最新文章