bootstrap-multiselect doc： http://davidstutz.github.io/bootstrap-multiselect/
项目中要用到下拉多选框，搜了一下，感觉bootstrap-multiselect，不错，今天来简单介绍一下：
测试页面：
1.多选下拉框：
2.单选下拉框：
从上面两个来看，能不能多选，主要是multiple="multiple"属性配置... 3.多选分组下拉框：
4.单选分组下拉框：
5.分组多选下拉框： 6.分组多选，可折叠，可全选下拉框：
效果如下：
使用过程中发现与的ace.min.css样式单冲突，multiselect下拉框checkbox不显示，
查看下拉框与页面中的checkbox有什么不同，
发现页面中checkbox多了一个，而multiSelect 下拉框中的checkbox中没有，看看能不能，修改JS，bootstrap-multiselect_cn.js;在脚本中createOptionValue方法中，修改
/**
* Create an option using the given select option.
*
* @param {jQuery} element
*/
createOptionValue: function(element) {
var $element = $(element);
if ($element.is(':selected')) {
$element.prop('selected', true);
}
// Support the label attribute on options.
var label = this.options.optionLabel(element);
var classes = this.options.optionClass(element);
var value = $element.val();
var inputType = this.options.multiple ? "checkbox" : "radio";
var $li = $(this.options.templates.li);
var $label = $('label', $li);
$label.addClass(inputType);
$li.addClass(classes);
if (this.options.enableHTML) {
$label.html(" " + label);
}
else {
$label.text(" " + label);
}
//var $checkbox = $('').attr('type', inputType);
var $checkbox = $('').attr('type', inputType);
//测试修改如下
//$checkbox.append('');
//$checkbox.after('');
//$('').append('');
//var $checkbox = $('').attr('type', 'radio'));
//solve the ace-admin-min.css，input type is checkbox css collision
//var $checkbox = $('').attr('class', "lbl");
//.append(' 信用证'
var name = this.options.checkboxName($element);
if (name) {
$checkbox.attr('name', name);
}
$label.prepend($checkbox);
...
}
测试发现：
$checkbox.append('');//这个不是我们想要的
我们想要的是after产生的效果，
$checkbox.after('');//无效，jquery，找不到，
但通id可以，调用after可以产生效果，而$('').after和通过class找不到。
至于问什么，没能解决，知道可以给我留言，谢谢。
参考：
JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove的使用: http://www.cnblogs.com/wx1993/p/4806873.html
放弃修改Js，修改css，bootstrap-multiselect
修改
.multiselect-container>li>a>label>input[type=checkbox] {
margin-bottom: 5px
}
为
.multiselect-container>li>a>label>input[type=checkbox] {
margin-bottom: 5px;
margin-left: 20px;
opacity:1;/*checkbox透明度*/
position:relative
}
添加如下样式：
.multiselect.dropdown-toggle.btn.btn-default {
background-color: #dbd8d8 !important;
color: black !important;
border: #c92727 !important;
box-shadow: none !important;
text-shadow: 0 -1px 0 #d8c8c8 !important;
}
.btn.btn-default.multiselect-clear-filter {
background-color: #fff9f9 !important;
border: #c34e4e !important;
}
使用!important主要是，主要让样式的优先级变高，可以来指定，不让ace.min.css覆盖：。
参考：
css样式加载顺序及覆盖顺序深入理解： http://www.jb51.net/css/124992.html
html、css、js文件加载顺序及执行情况： http://www.cnblogs.com/Walker-lyl/p/5262075.html
CSS样式加载顺序:
1.标签内有一个标签引用外部CSS文件
2.内部css样式
3.标签style样式
即按在html中css出现的顺序；但这些样式是有优先级的如下，
CSS样式覆盖顺序深入理解:
1. 样式表的元素选择器选择越精确，则其中的样式优先级越高：
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
2. 对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高
注意，这里是样式表文件中越靠后的优先级越高，而不是在元素class出现的顺序。
3. 如果要让某个样式的优先级变高，可以使用!important来指定
测试页面：
- bootstrap-multiselect-master_cn.rar (355.2 KB)
- 下载次数: 114
- 查看图片附件