多选下拉控件的使用（select-option）
1、第一个组件是写bootstrap table的主人公 wenzhixin 封装的一个组件—— multiple-select 。这个组件风格简单、文档全、功能强大。
Multiple-Select源码主页： https://github.com/wenzhixin/multiple-select
Multiple-Select文档以及Demo： http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN
2、第二个组件：bootstrap-multiselect 。这个组件风格和第一个非常相似，文档也挺全面。
bootstrap-multiselect源码主页： https://github.com/davidstutz/bootstrap-multiselect
bootstrap-multiselect文档以及Demo： http://davidstutz.github.io/bootstrap-multiselect/
本篇中使用的是第一个控件来实现多选下拉框：
首先引入支持文件
multiple-select.js，multiple-select.css，multiple-select.png
支持过滤，启用，禁用，分组，功能还是比较全面
html片段：
example:
<head>
<link href="multiple-select.css" rel="stylesheet"/>
</head>
<body>
<select multiple="multiple">
<option value="1">January</option>
...
<option value="12">December</option>
</select>
<script src="multiple-select.js"></script>
<script>
$("select").multipleSelect({
placeholder: "Here is the placeholder"
});
</script>
</body>
//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
在使用过程中可以补充
扫一扫
1476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
