Layui 表单重置后 Select 未刷新的解决方案

Layui 表单重置后 Select 未刷新的解决方案

在 Layui 表单操作中，有时会遇到点击重置按钮后，普通输入框能正常清空，但 select 下拉选择框却保持原有选中状态，未能被重置的情况。

 // 重置事件
  $("#reset").click(function () {
    $("#searchContent").val("");
    $("#selectKey").val("");
    form.render();
  })

解决该问题的关键在于调用 form.render() 方法，该方法会强制重新渲染表单组件，使 select 元素恢复到初始状态。

表单元素渲染机制解析

为何表单元素在 Layui 中不直接显示？

Layui 为了美化 select、checkbox、radio 等原生表单元素，默认会隐藏原始 DOM 节点并替换为自定义样式。这一过程依赖于 form 模块的加载与实例化。若未正确执行 form 实例，这些元素将无法正常渲染。同理，导航栏的 Hover 效果及 Tab 选项卡等功能也依赖对应模块（如 element 模块）的初始化。

layui.use('form', function(){
 var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
 
 //……
 
 //但是，如果你的HTML是动态生成的，自动渲染就会失效
 //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
 form.render();
}); 

以上即为 Layui 中重置按钮导致 select 未重置的解决思路。通过理解 form.render() 的作用机制，可有效处理此类表单刷新问题。