layui 点击重置按钮， select 并没有被重置

最新推荐文章于 2025-07-05 14:12:24 发布

来自流星

最新推荐文章于 2025-07-05 14:12:24 发布

阅读量1.5w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：问题 layui

本文链接：https://blog.youkuaiyun.com/qq_34579060/article/details/85339020

问题同时被 2 个专栏收录

29 篇文章

订阅专栏

layui

3 篇文章

订阅专栏

本文探讨了在使用Layui框架时遇到的表单重置问题，特别是当select元素无法正确重置的情况。通过加载form模块并执行form.render()方法，解决了动态生成HTML表单元素的自动渲染失效问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如下所示：点击重置时，输入框被重置为空，而账号 select元素并没有被重置。

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

调用一下 form.render();即可

为什么表单不显示？

当你使用表单时，Layui会对select、checkbox、radio等原始元素隐藏，从而进行美化修饰处理。但这需要依赖于form组件，所以你必须加载 form，并且执行一个实例。值得注意的是：导航的Hover效果、Tab选项卡等同理（它们需依赖 element 模块）

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