layui form 下拉多选框重置后多选变单选的解决方案

最新推荐文章于 2025-04-09 15:44:40 发布
最新推荐文章于 2025-04-09 15:44:40 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45237517/article/details/102942090
版权

layui form表单的中，有一个清空该form中所有组件值的按钮。只需将button的type="reset"设置后点击即可实现。但该功能也有一个弊端，如果你在使用需要额外渲染的组件时，比如下拉多选框，在重置值后，多选就会变成单选，在这里提供一个思路去解决这个问题。

说明：

此处以一个下拉多选框为例：
在这里插入图片描述

1、将type="reset"去除，使其成为一个普通的按钮
<button class="layui-btn" type="button" id="clear"><i class="layui-icon">&#xe00A;<
最低0.47元/天 解锁文章
layui下拉框选择后，刷新页面保留上一次的选择,数据是之前搜索条件的数据
云子
08-02 2906
流程： 1.下拉框选择后，提交表单 在提交中将选择的值设置到sessionStorage 2.使用form.val和form.render() <div class="layui-inline"> <label class="layui-form-label">年级</label> <div class="layui-input-inline"> <select name="grade" lay-search id="form_vi.
前端BootStrap与LayUI框架
qq_52992141的博客
11-05 1430
前端BootStrap与LayUI
layui重置下拉框的问题
weixin_44448873的博客
06-22 1551
// 重置支付状态 $("select#paymentStatus").val(""); //重新渲染下拉框 layui.use('form', function () { var form = layui.form; form.render("select"); }); 重置下拉框后，一定要重新渲染下拉框
Layui 11 formSelects-v4 下拉选 （第 3 方 下拉菜单组件）
最新发布
monian187的博客
04-09 1223
layui 第3方插件 下拉选择框
layui，多选，用模板渲染以后，变单选
zxp_smile的博客
12-21 516
// 点击添加，模板渲染 function render() { var data = {index:$('.pic-item').length}; //第三步：渲染模版 var getTpl = demo.innerHTML ,view = $('.pic-list'); laytpl(getTpl).render(data, function(html){ view.append( html); uploadImg(dat.
layui 数据表格复选框实现单选功能
weixin_34344677的博客
05-08 2188
//点击选中(单选)//单击行勾选checkbox事件 $(document).on("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tableBox = $(this)...
LAYUI动态赋值下拉框选项后，要清空下拉选项，reset不生效，再赋值为空也不生效的处理
leiyanglove的博客
03-11 848
【代码】LAYUI动态赋值下拉框选项后，要清空下拉选项，reset不生效，再赋值为空也不生效的处理。
layui第三方插件xm-select
07-24
layui是一个轻量级的前端框架，它以其简洁的API...这个插件不仅丰富了layui的功能，还让下拉多选框变得更加智能化，提高了用户的操作效率。无论是简单的多选场景，还是复杂的业务逻辑，`xm-select`都能游刃有余地应对。
layui下拉框数据过万渲染渲染问题解决方案
weixin_30565327的博客
04-28 2691
方案一：layui下拉框分页插件 https://fly.layui.com/jie/29002/ 此插件我用了下浏览器缓存有问题，而且当下拉框数据量过万后，会一直渲染不出来，期待后期作者优化 如图下拉框效果： 引入js和css <script src="${contextPath}/static/selectPage/js/utils.js" type="text/j...
layui Form内容重置清空
11-24 2633
layer.open({ type: 1, anim: -1, title: '添加单位', closeBtn: 1, offset: 'r', // shade: 0.1, shadeClose: true, skin: 'layui-anim layui-anim-rl layui-layer-adminRight', content: $(..
layui的复选框怎么设置只能单选？
m0_37641835的博客
12-05 896
layui
layui 点击重置按钮, select 并没有被重置的解决方法
12-02
如下所示： 点击重置时，输入框被重置为空，而账号 select元素并没有被重置。 // 重置事件 $("#reset").click(function () { $("#searchContent").val(""); $("#selectKey").val(""); form.render(); }) 调用一下 form.render();即可 为什么表单不显示？ 当你使用表单时，Layui会对select、checkbox、radio等原始元素隐藏，从而进行美化修饰处理。但这需要依赖于form组件，所以你必须加载 form，并且执行一个实例。值得注意的
layui初始化初始化下拉框
vcoy的博客
10-24 1180
标签循环赋值
layui 重置所有多选框
胖胖胖胖的博客
04-16 1058
layui JS重置所有多选框 $("[type='checkbox']").removeAttr("checked");
layui中的下拉多选框(赋值取值回显)
隐心咒Amor的博客
06-29 6044
效果图: 下拉框中的不同的选项 代码示例 页面准备一个div用来放置下拉框 <div class="layui-form-item"> <label class="layui-form-label">多选下拉框</label> <input type="hidden" id="studentIds"> <div class="layui-input-block" id="studentIds_box"&g
Layui中复选框变单选框，单击勾选取消，获取选中行数据
qq_27830847的博客
06-25 1587
Layui中复选框变单选框，单击勾选取消，获取选中行数据终于弄好了，记录下。 终于弄好了，记录下。 才弄这个layui，感觉还行，界面挺好看的，文档也还详细，但是看文档是真心累。屁话不多说，直接上代码 // 禁止全选 这句写在 ---> done: function (res, page, count) {这里} ...
layui表单重置，js重置表单, jquery重置表单
weixin_30455023的博客
10-25 744
　　有天写项目的时候需要重置表单，不是在页面添加重置按钮那种， 　　在官方文档上并没有看见layui表单有重置功能（有可能是我没找到ʘᴗʘ） 　　然后就有了下面的代码，也能清空layui表单 html代码： 　　<form id="myform"> 　　　　<!--内容--> 　　</form> js,jquery代码： 　　doc...
layui form表单清空、重置
热门推荐
前端阿玉博客
10-09 1万+
layui 官网将于2021年10月13日进行下线。先致敬 贤心 一波，作者在公告说，请大家怀揣对 Web 前端技术的热忱，去拥抱 Vue.js、拥抱 Element UI、拥抱更好的新时代，以及，所有那些值得去追求的美好事物... 个人感觉layui看上去真的比较美观，不管怎么说和jquery结合也非常经典，不知道为什么没有引入到vue和react里面去，有点遗憾... layui的 form表单的重置并没有官方给出详细的文档介绍，看了很多人的方法都是 jquery的重置方dd xxxxxxxx ..
创新自动生成form表单解决方案
- 选择框：下拉菜单、单选按钮、复选框等，用于收集用户的选择。 - 按钮：提交按钮用于提交表单，重置按钮用于清除表单数据。 - 标签：为表单元素提供描述，提高易读性。 - 文本域：用于输入多行文本。 - 隐藏...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值