bootstrap-multiselect 的简单使用,样式修改,动态创建option
1.bootstrap-multiselect 顾名思义基于bootstrap,bootstrap基于jquery,所以第一步,引入文件
bootstrap.css/ juery.js /bootstrap.js 引入此三个文件,是常用的就不贴出来了;
引入下面的两个文件,如果没有请去github下载:https://github.com/davidstutz/bootstrap-multiselect
<link rel="stylesheet" type="text/css" href="bootstrap-multiselect.css"> <script type="text/javascript" src="bootstrap-multiselect.js"></script>
2.开始使用
<div style="width: 100%; margin:20px"> <select multiple="multiple" style="width:100%; "> <option>一室一厅</option> <option>两室一厅</option> <option>三室一厅</option> </select> </div>
这是一段都知道的代码,我尽量说的简便易懂;
$('select').multiselect();
不展开和展开的效果就在上面;这就是简单的使用;
接下来我们来添加两个配置:
$("select").multiselect({ buttonWidth:195, //选择框的大小 includeSelectAllOption: true,//是否现实全选 });
看看效果:
可以看到源码里面介绍,有许多的配置项,网上已经相应的关于每一个配置项的介绍,例如这一篇http://blog.csdn.net/fangzilixia/article/details/51265112 可以看看;
2.改变多选框的样式;让它变得好看点;
.multiselect-container{ /*下拉框的样式*/ width:195px; } .multiselect-container>li>a>label{ line-height: 28px; font-size: 12px; } .multiselect-container>li>a>label>input[type='checkbox'] { margin-top: 7px; } .multiselect-item.multiselect-all.active{ border-bottom:1px solid #ccc !important; } /* .multiselect-container.dropdown-menu li{ width:49%; display: inline-block; } .multiselect-container.dropdown-menu li:first-child{ width:100%; } */ .multiselect.dropdown-toggle.btn.btn-default:link,.multiselect.dropdown-toggle.btn.btn-default:visited,.multiselect.dropdown-toggle.btn.btn-default:focus,.multiselect.dropdown-toggle.btn.btn-default:hover,.multiselect.dropdown-toggle.btn.btn-default:active, .btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default{ background: #fff; outline: none; border:1px solid #ccc; box-shadow: none; } .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{ background: #474752; } .multiselect-selected-text{ font-size:13px; font-family: '微软雅黑','宋体'; width:100%; float: left; text-align: left; } .btn.btn-default{ padding-right:15px; }
看看效果:
样式就改到这;
3.动态添加option
将html的option去掉:
<div style="width: 100%; margin:20px"> <select multiple="multiple" name="companyIdStr" class="companyIdStr" style="width:100%; "> </select> </div>
法1:
function multiselect(obj) { //初始化方法 $(obj).multiselect({ includeSelectAllOption: true, enableClickableOptGroups: true, enableCollapsibleOptGroups: true, buttonWidth: 195, maxHeight: 300, }); } //动态创建option function newOption(data, className) { var option; for (var i = 0; i < data.length; i++) { if (data[i].selected) { //判断是否要初始化时就选择 option += '<option value="' + data[i].value + '" selected="' + data[i].selected + '">' + data[i].label + '</option>'; } else { option += '<option value="' + data[i].value + '">' + data[i].label + '</option>'; } } $(className).html(option);//将内容显示在复选框, $(className).append(option) 也是可以的; multiselect(className); } var data = [{ value: '1', label: '一室一厅', selected: true }, { value: '2', label: '两室一套' }, { value: '3', label: '两室三套' }]; newOption(data, '.companyIdStr');
效果这样,默认第一个可选;
法二:
$("select[name='companyIdStr']").multiselect({ enableClickableOptGroups: true, enableCollapsibleOptGroups: true, enableCollapsibleOptGroups: true, buttonWidth:195, //选择框的大小 includeSelectAllOption: true, selectAllJustVisible:true, //下拉回调函数 onDropdownShow: function (event) { addOption(); }, }); function addOption(){ var data=[{value:'1',label:'一室一厅',selected:true},{value:'2',label:'两室一套'}]; $("select[name='companyIdStr']").multiselect('dataprovider',data); }
利用本身回调事件;
就是这样,两种办法;