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

layui下拉搜索框怎么设置多选

酷静酱_9239

酷静酱_9239

发布时间:2026-09-28 15:07:47

|

787人浏览过

|

来源于php中文网

原创

formSelects.render 的 type 参数必须设为 'checkbox' 才能启用多选功能,否则默认为单选;需正确引入 formSelects-v4.js 及依赖,取值赋值须用 formSelects.value(),表格中需在 done 和 page.jump 中重复初始化。

layui下拉搜索框怎么设置多选

formSelects.render 的 type 参数必须设为 'checkbox'

原生 select 加 multiple 属性在 Layui 里不会自动变成多选下拉框,Layui 自带的 form.select 也不支持多选。真正起作用的是第三方插件 formSelects,它的多选行为由 type: 'checkbox' 控制。

常见错误是漏写或写成 'radio'、'default',甚至直接省略——这都会退化为单选模式。

  • type: 'checkbox' → 多选(带复选框)
  • type: 'radio' → 单选(带单选按钮)
  • 不传 type 或设为 'default' → 单选(无控件,仅高亮)

必须引入 formSelects-v4.js,且顺序不能错

formSelects is not defined 这类报错,90% 是因为没加载插件 JS 文件,或加载顺序不对。Layui 自身的 layui.js 不含 formSelects,必须额外引入。

正确顺序:

  • 先加载 jquery-3.3.1.min.js(formSelects 依赖 jQuery)
  • 再加载 layui.js
  • 最后加载 formSelects-v4.js
  • CSS 文件(formSelects-v4.css)建议放在 <head> 中

如果用 layui.use,记得在模块数组里显式声明:['form', 'formSelects'],否则 formSelects 不会注入全局作用域。

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

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

下载

取值和赋值必须用 formSelects.value(),别碰原生 DOM

渲染后真实的 <select> 元素被隐藏了,DOM 操作完全失效。用 $('select[name="xxx"]').val() 或 document.querySelector('select').value 都会返回 undefined 或第一个值,纯属误导。

  • 获取多选值:formSelects.value('mySelect') → 返回 ['java', 'python'](字符串数组)
  • 设置多选值:formSelects.value('mySelect', ['go']) → 自动勾选并刷新 UI
  • 清空所有选项:formSelects.value('mySelect', []),比点右上角 × 更可靠,适合表单重置逻辑

注意:后端若需要 JSON 数组,得手动 JSON.stringify(roles);若要逗号字符串,自己 .join(','),插件不自动转换。

表格中动态生成的下拉框需在 done 和 page.jump 里重复初始化

Layui table 的单元格是 JS 动态插入的,首次 render 后 DOM 才存在。如果只在页面加载时调用一次 formSelects.render(),翻页、重载、编辑行时新生成的 select 就没被接管——表现为点击无反应、选中不回显、取不到值。

解决方式是封装初始化函数,并在两个地方调用:

  • table.render().done:确保首屏渲染完成后再绑定
  • page: { jump: initFormSelectsInTable }:翻页时重新绑定

每次调用前无需销毁旧实例,formSelects.render() 会自动覆盖同名 ID/Filter 的已有实例。但要注意每个下拉框的 name 或 xm-select 值必须唯一,否则相互干扰。

复杂点在于动态场景下的生命周期管理——不是写一次就完事,而是要跟表格的 DOM 生命周期对齐。最容易被忽略的是翻页后忘记重绑,导致后续操作全失效。

热门AI工具

更多
豆包大模型

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

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

蛙蛙写作

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

WorkBuddy

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

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

DeepSeek

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

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

相关专题

更多
ajax教程
ajax教程

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

2380

2023.06.14

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

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

340

2023.08.31

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

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

2233

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1141

2024.09.24

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

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

160

2026.09.23

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

80

2026.09.23

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

80

2026.09.23

Conan创建软件包配方指南
Conan创建软件包配方指南

本专题介绍通过conanfile.py创建软件包的方法,讲解包名、版本、依赖和构建设置等基础信息,以及source、build、package、package_info等常用方法的作用及编写思路。

40

2026.09.22

Conan二进制包配置指南
Conan二进制包配置指南

本专题介绍Conan根据操作系统、编译器、架构和构建类型生成二进制包的方法,讲解Profile、Settings、Options及Package ID的作用,帮助管理不同平台和编译环境下的包版本。

60

2026.09.22

热门下载

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

精品课程

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

共87课时 | 12.5万人学习

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

共89课时 | 10.7万人学习

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

共5课时 | 1.6万人学习

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

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