需要引入插件:fselect.js (此插件依赖jQ) 和 fselect.css  下载

点击查看在线演示地址

//html
<select class="demo" multiple="multiple">
<optgroup label="Languages">
<option value="cp">C++</option>
<option value="cs">C#</option>
<option value="oc">Object C</option>
<option value="c">C</option>
</optgroup>
<optgroup label="Scripts">
<option value="js">JavaScript</option>
<option value="php">PHP</option>
<option value="asp">ASP</option>
<option value="jsp">JSP</option>
</optgroup>
</select> //js 初始化
$('.demo').fSelect() //取值文字
$('.fs-label').text() //取值 value
var value = [].map.call($('.fs-option.selected'),function(el){return el.dataset.value})

P.S.:select 多选一定要加上 multiple="multiple"

select 下拉框多选的更多相关文章

  1. 使用jquery-combobox实现select下拉框多选之后,如何将下拉框的值传给input隐藏域

    我在之前的一篇博文中eaeyui-combobox实现组合查询(即实现多个值得搜索)地址:http://www.cnblogs.com/dushan/p/4778897.html 实现了select下 ...

  2. select 下拉框的选中项的change事件

    HTML文件 <span style="float: left;">类      型:   <select id="type" class=& ...

  3. javascript遍历select下拉框判断其中值是否与指定值相等

    用jquery多了,就忘了原生的js是如何写的了,还需要多加巩固. 需求:jsp回显一select下拉框.选中指定值. 用户点击修改 该select进行已有值回显.有两种解决方法 一.js中获取用户的 ...

  4. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  5. jquery实现下拉框多选

    一.说明 本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下 二.代码 <!DOCTYPE html PUBLIC & ...

  6. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  7. jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  8. jquery操作select下拉框的多种方法(选中,取值,赋值等)

    Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...

  9. 点击select下拉框获取option的属性值

    select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...

随机推荐

  1. 线段树区间合并+k维空间的曼哈顿距离——cf1093G好题

    和去年多校的CSGO一样,用状态压缩来求Manhattan距离的最大值 然后要用线段树维护一下区间最大值 /* k维空间给定n个点,两个操作 1 i b1 b2 .. bk : 修改第i个点的坐标 2 ...

  2. window 下kafka 配置测试

    1.准备工作 1.1 java环境 1.2 下载并解压到D:\zookeeper-3.4.13  下载并解压到 D:\kafka_2.12-2.1.0 2.安装zookeeper .kafka 我安装 ...

  3. mongodb操作指令(一):数据库,集合,文档

    数据库 查看所有数据库 show dbs 查看当前数据库 db 创建使用数据库use runoob 删除数据库 db.dropDatabase() 集合 创建集合db.createCollection ...

  4. 使用WebStorm上传本地项目到GitHub和GitLab

    在使用 WebStorm 上传本地项目到 GitHub 之前,先要做一些相关配置. 首先打开 WebStorm ,依次点击File -> Settings… 打开系统设置面板,在上面搜索 git ...

  5. 资源-Android:Android

    ylbtech-资源-Android:Android 1.返回顶部 1. https://developer.android.google.cn/studio 2. 2.返回顶部 1. 1.1 1.2 ...

  6. 软件-开发软件:Android Studio

    ylbtech-软件-开发软件:Android Studio Android Studio 是谷歌推出的一个Android集成开发工具,基于IntelliJ IDEA. 类似 Eclipse ADT, ...

  7. Java-Maven-pom.xml-project-dependencies:dependencies

    ylbtech-Java-Maven-pom.xml-project-dependencies:dependencies 1.java 调用ddl <!-- java 调用ddl --> ...

  8. ArrayList 和linkedList 插入比较

    从学Java开始, 就一直大脑记着  arrayList 底层是数组 ,查询快, 插入慢, 有移动的动作.linkedList 底层链表, 插入快 查询慢,今天写了例子跑了跑, 果然. public ...

  9. 第三篇:异步请求遇上for循环怎么做

    场景:读取Excel数据(地名),发送请求到百度地图,从返回的json格式数据取出坐标数据(逗号隔开的两个float型数值),拼接成了分号隔开的一个字符串data,接下来需要利用“百度坐标转换API” ...

  10. Java开发系列-电子邮箱

    概述 电子邮箱就是在邮箱服务器上开启的一块空间.邮箱服务器就是一个安装在计算机的服务软件,提供有邮件服务. 邮箱的发送流程 现在tom要发送一份邮件给jerry,首先tom将邮件通过客户端连接自己设置 ...