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已选择”
});

别忘了引入js和css文件，这两个文件收了1大洋，木有积分的亲们可以加3393055725分享，下载地址：
http://download.csdn.net/detail/cat_pp/9774366

select实现多选、全选、全不选相关推荐

vue 带全选和多选的表格怎么写_vue中使用计算属性巧妙的实现多选框的“全选”...
接下来我会以一个购物车的例子,来演示如果借助计算属性,精巧的实现多选框的全选功能.当然,有全选,自然对应的也还有取消全选. 以下这张gif图,就是最终的实现效果: 第一步,针对购物车每一个商品进行设置 ...
vue设置多选框默认勾选_Vue实现全选和反选即Vue复选框增加全选功能
导语:Vue中单选下拉框开发起来非常简单,直接select包裹一个带v-for的option即可但是当我们想做个带多选的下拉框该怎么办呢?最简方法是什么?比如下面这个图: 如果网上搜的话,搜的是一堆 ...
复选框的全选、全不选、和获取选中的值；
1.获取select下面的选中的option值 <select id="afterSaleReson" name="afterSaleReson"> ...
AVL_全选_取消全选_打印_ZMM1035
*&---------------------------------------------------------------------* *& Report ZMM1035 * ...
react实现全选、取消全选和个别选择
react里面实现全选和取消全选,个别选择等操作,效果如下代码: import React, {Component} from 'react' export default class Demo e ...
【jQuery】复选框的全选、反选，推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
JS实现全选、反选、不选
JS实现全选.反选.不选效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head><meta charset=" ...
在项目中学习.NET的JQuery CheckBox方法(全选、取消全选、其他）
一.在项目中遇到的CheckBox的全选和取消全选以及其他等解决方案如下: // 对全选和取消全选的事件 $("#CheckAll").click(function () { ...
微信小程序筛选侧边栏全选与反全选
小程序中经常会有筛选侧边栏的按钮,今天用原生小程序实现这一功能. 1.wxml核心代码 <button class="filterBtn" bindtap="tra ...
axure实现复选框全选_AxureRP8实战手册-案例73（全选与取消全选效果）
案例73. 全选与取消全选效果案例来源: 百度音乐-音乐盒案例效果: 初始状态/取消全选时:(图5-117) 全选后取消任一选项时:(图5-118) 全选/单选全部选中时:(图5-119) 案例描 ...

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

select实现多选、全选、全不选相关推荐

最新文章

热门文章