讲师中心 微信公众号
AI工具推荐 视频效率加速

layui下拉框如何一次性选中多个值

星静大大_6503

星静大大_6503

发布时间:2026-09-09 10:30:31

|

301人浏览过

|

来源于php中文网

原创

layui原生select不支持多选,必须用formSelects-v4或xm-select等插件实现;formSelects.value()或xmSelect.setValue()可批量赋值,且需在layui.use回调中执行。

layui下拉框如何一次性选中多个值

layui原生select不支持一次性选中多个值

直接给 <select multiple>multiple 属性,再用 JS 设置 select.value 或操作 option.selected,在 layui 2.x 中完全无效。因为 layui 的 form.render('select') 会忽略 multiple,只按单选逻辑初始化下拉面板,DOM 上的勾选状态不会同步到 UI,点击后也只会关闭面板、不响应多选行为。

常见错误现象包括:select.value 始终为空字符串;调用 form.on('select()') 收不到任何触发;用 jQuery 的 $('select').val(['a','b']) 后界面无变化。

  • layui 官方文档和源码明确只实现单选渲染逻辑,不存在 multiple: true 配置项
  • 强行 patch 原生 select DOM 行为,会导致下拉面板打开/关闭异常、滚动错位、IE11 兼容性崩溃
  • 表单提交时,隐藏的原生 select 元素仍只提交第一个选中值(或空),无法满足后端接收数组的需求

必须用 formSelects-v4 初始化才能批量赋值

formSelects.render() 是唯一稳定支持“一次性选中多个值”的方案。它不依赖原生 select 的 multiple 行为,而是接管整个渲染流程,把选项转为带复选框的下拉列表,并提供 value() 方法直接设置数组。

初始化后,用 formSelects.value('mySelect', ['java', 'python']) 即可立刻勾选对应项并刷新 UI,无需遍历 DOM 或模拟点击。

  • 参数必须是字符串数组,如 ['1', '3', '5'],不能是逗号字符串 '1,3,5' 或数字数组 [1,3,5]
  • 如果选项数据来自异步加载(如 AJAX),需等 formSelects.render() 的 success 回调执行完毕后再调用 value()
  • 若初始化时已传入 data 数组,其中对象含 selected: true 字段,也会自动勾选——但该方式不适用于运行时动态赋值

xm-select 也能批量设置,但 API 不同

如果你选用 xm-select 插件,批量选中靠的是 setValue() 方法,且接受对象数组或 value 数组两种格式:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

xmSelect.render({ el: '#demo', data: [...] }) 返回实例,记为 ins,之后调用 ins.setValue(['1','2'])ins.setValue([{value:'1'}, {value:'2'}]) 均可生效。

  • 注意:xm-selectsetValue() 不会触发 change 回调,如需响应,得手动调用 ins.getValue() 后做后续处理
  • 它不兼容 formSelectsbtnClear 参数,清空需调用 ins.setValue([])
  • 若后端返回的是字符串数组(如 ["admin","editor"]),直接传给 setValue() 即可,无需转换结构

别在 form.on('select()') 里取多选值

无论用 formSelects 还是 xm-select,原生 form.on('select(filterName)') 都监听不到多选变化。因为真实 select 元素被隐藏,它的 change 事件根本不会触发。

必须改用插件自己的监听方式:

  • formSelects.on('mySelect', function(id, vals) { ... }) —— vals 是当前选中项数组,每个元素是对象 {id: '1', name: 'Java'}
  • xmSelect.on('demo', function(res) { ... }) —— res.arr 是选中项数组,res.val 是 value 字符串数组
  • 表单提交前取值,也必须调用插件方法:formSelects.value('mySelect')ins.getValue('value'),而非 $('select[name="mySelect"]').val()

最容易被忽略的是:插件初始化和赋值的执行顺序。如果 JS 在 DOM 尚未就绪时就调用 render()value(),会静默失败——务必包裹在 layui.use([...], function(){...}) 内,或确保 DOM 已挂载。

热门AI工具

更多
蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2063

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

4403

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

5510

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

4978

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

703

2024.05.22

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2280

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

340

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2113

2023.11.15

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

0

2026.09.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.4万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 10.6万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn