引入文件：
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/><link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script>
使用
jsp頁面
<div class="form-group"> <label class="col-sm-4 control-label"><i class="required">* </i>所屬部門：</label> <div class="col-sm-6"> <div class="myOwnDdl"> <select name="expendProject" id="user_dept" class="form-control"> <option value="" selected="selected">請選擇部門</option> </select> </div> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label"><i class="required">* </i>所屬角色：</label> <div class="col-sm-6"> <div class="myOwnDdl"> <select name="expendProject" id="user_role" class="form-control" multiple="multiple"> <c:forEach var="var" items="${requestScope.roles }"> <option value="${var.id}">${var.roleName}</option> </c:forEach> </select> </div> </div> </div>js:
$("#user_role").multiselect({ //分別為控制下拉容器最大高度、最多允許具體展示選中項數(shù)（其余以數(shù)字形式展示）、隔行換色控制、全選、支持檢索。
maxHeight:300, numberDisplayed:3, optionClass: function(element) { var value = $(element).parent().find($(element)).index(); if (value%2 == 0) { return 'even'; } else { return 'odd'; } }, includeSelectAllOption: true, enableFiltering: true, selectAllJustVisible: true, nonSelectedText: '請選擇角色', //默認展示文本 selectAllText: '全選' //全選文本 });如希望修改其寬度，參考：http://m.blog.csdn.net/article/details?id=50971672
根據(jù)option的id設(shè)置某個選項為被選擇。
$(‘#selectId').multiselect(‘select',optionId);
以上所述是小編給大家介紹的Bootstrap 下拉多選框插件Bootstrap Multiselect，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
