如下所示: 点击重置时,输入框被重置为空,而账号 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();
-
});
<div class="more-toolbox">
<div class="left-toolbox">
<ul class="toolbox-list">
<li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true">
<use xlink:href="#csdnc-thumbsup"></use>
</svg><span class="name">点赞</span>
<span class="count">1</span>
</a></li>
<li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-csdnc-Collection-G"></use>
</svg><span class="name">收藏</span></a></li>
<li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-csdnc-fenxiang"></use>
</svg>分享</a></li>
<!--打赏开始-->
<!--打赏结束-->
<li class="tool-item tool-more">
<a>
<svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg>
</a>
<ul class="more-box">
<li class="item"><a class="article-report">文章举报</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="person-messagebox">
<div class="left-message"><a href="https://blog.csdn.net/qq_34579060">
<img src="https://profile.csdnimg.cn/1/1/E/3_qq_34579060" class="avatar_pic" username="qq_34579060">
<img src="https://g.csdnimg.cn/static/user-reg-year/2x/4.png" class="user-years">
</a></div>
<div class="middle-message">
<div class="title"><span class="tit"><a href="https://blog.csdn.net/qq_34579060" data-report-click="{"mod":"popu_379"}" target="_blank">来自流星</a></span>
</div>
<div class="text"><span>发布了191 篇原创文章</span> · <span>获赞 69</span> · <span>访问量 57万+</span></div>
</div>
<div class="right-message">
<a href="https://bbs.csdn.net/topics/395529328" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-messageboard">他的留言板
</a>
<a class="btn btn-sm bt-button personal-watch" data-report-click="{"mod":"popu_379"}">关注</a>
</div>
</div>
</div>