select实现多选、全选、全不选

关注

原创最新推荐文章于 2026-04-21 13:15:07 发布 5.5w 阅读 AI 写同款· GEO 优化 ›

最好用的 5 个 Vue select 单选多选下拉组件 - 卡拉云单选 / 下拉 / 多选（select）组件在搭建 Vue 的 app 中特别常用，Vue select 除了用鼠标点选外，还可以有更多样的功能，比如搜索过滤，树状结构，tab 分组，按组选择等。这些高级功能都可以在第三方组件中找到，本文记录了我自己使用多年最好用的 5 款 Vue select 组件，每一款都经过我实际测试，推荐给大家。阅读详情

今天使用select下拉框实现了全选，全不选和多选的功能，效果如图：
这里写图片描述
1、html代码：

为select标签设置multiple属性为true

<select id="myselect" multiple="true">
    <option value="1">java</option>
    <option value="2">javaSE</option>
    <option value="3">javaEE</option>
</select>

截图和代码不相符，因为我用的是struts2框架，使用的是<s:select>标签，直接使用list获取下拉选项的，这里只是说明一下问题。关于s:select标签可以参考下面这个链接：
s:select标签的使用和相关属性说明
2、js代码：
接下来就是在js中设置select标签的多选功能：

$("#myselect").multiselect({
    noneSelectedText : "--请选择--", //当没有内容选中时候显示的文本
    checkAllText : "全选", //全选按钮显示的文本
    uncheckAllText : "全不选", //全不选按钮显示的文本
    minWidth : 200, //select框的宽度，根据option的内容长短设置
    selectedList : 2 //当选中的内容超过2条时，显示“n已选择”
});