html下拉框 multiple,多选下拉控件的使用（select-option）multiple-select

多选下拉控件的使用(select-option)

1、第一个组件是写bootstrap table的主人公

2、第二个组件

本篇中使用的是第一个控件来实现多选下拉框：

首先引入支持文件

multiple-select.js，multiple-select.css，multiple-select.png

支持过滤，启用，禁用，分组，功能还是比较全面

html片段：

example:

January

...

December

$("select").multipleSelect({

placeholder: "Here is the placeholder"

});

//js片段

//这里要取得选中的值，调用已有的函数

.multipleSelect('getSelects','value'); //value表示是属性类型

参数设置：

multipleSelect重要的方法：支持参数的初始话

本次使用过程中遇到的参数使用有

$("select").multipleSelect({

placeholder:"请选择",//初始话文字设置

selectAll:"true",//支持全选

width:"200",//设置控件宽度

selectAllText:"全选",//全选text

container:"body",//重新选择空间显示的范围，这里遇到一个问题，就是下拉ms-drop显示不全，这里是区域问题，在这设置一下就ok

allSelected:'已全选',//全选以后显示text

countSelected:'#项已选中'//已选中的项数

});

$(".ms-drop").css({'width':'200'});//重新修改下拉框的宽度样式

这里只遇到一个问题就是下拉框显示不全，通过设置container属性已经解决。

其他问题可以读multiple-select.js，multiple-select.css文件

遇到问题可以看问题列表https://github.com/wenzhixin/multiple-select/issues/255

在使用过程中可以补充