<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Multiselect</title>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="docs/css/bootstrap-3.3.2.min.css" type="text/css">
<link rel="stylesheet" href="docs/css/bootstrap-example.min.css" type="text/css">
<link rel="stylesheet" href="docs/css/prettify.min.css" type="text/css">
<script type="text/javascript" src="docs/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="docs/js/bootstrap-3.3.2.min.js"></script>
<script type="text/javascript" src="docs/js/prettify.min.js"></script>
<link rel="stylesheet" href="dist/css/bootstrap-multiselect.css" type="text/css">
<script type="text/javascript" src="dist/js/bootstrap-multiselect.js"></script>
<style>
/* select -mul*/
/*自定义宽度*/
.myOwnDdl{
display:inline-block;
width:100%;
}
/* 实现宽度自定义 */
.myOwnDdl .btn-group{
width:100%;
}
.myOwnDdl .multiselect {
width:100%;
text-align:right;
margin-top:-5px;
}
.myOwnDdl ul {
width:100%;
}
.myOwnDdl .multiselect-selected-text {
position:absolute;
left:0;
right:25px;
text-align:left;
padding-left:20px;
}
/*控制隔行换色*/
.myOwnDll .multiselect-container li.odd {
background: #eeeeee;
}
/*//控制select文本内容位置*/
.btn-group>.btn:first-child {
margin-left: 0;
padding-right: 90%;
}
/* select -mul end */
</style>
<script type="text/javascript">
$(document).ready(function() {
window.prettyPrint() && prettyPrint();
$("#moreSelect").multiselect({ //分别为控制下拉容器最大高度、最多允许具体展示选中项数（其余以数字形式展示）、隔行换色控制、全选、支持检索。
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: '全选' //全选文本
});
$('#radioSelect').multiselect({
enableFiltering: true,
});
});
</script>
</head>
<body>
<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="moreSelect" class="form-control" multiple="multiple">
<option value="1">AAAAAAAA1</option>
<option value="2">BBBBBBBB2</option>
<option value="3">CCCCCCCC1</option>
<option value="4">DDDDDDDD2</option>
<option value="5">EEEEEEEE3</option>
<option value="6">FFFFFFFF4</option>
<option value="7">GGGGGGGG3</option>
<option value="8">HHHHHHHH5</option>
<option value="9">TTTTTTTT4</option>
</select>
</div>
</div>
</div>
<div class="form-group" style="padding-top:110px">
<label class="col-sm-4 control-label"><i class="required">* </i>项目单选：</label>
<div class="col-sm-6">
<div class="myOwnDdl">
<select name="expendProject" id="radioSelect" >
<option value="1">AAAAAAAA1</option>
<option value="2">BBBBBBBB2</option>
<option value="3">CCCCCCCC1</option>
<option value="4">DDDDDDDD2</option>
<option value="5">EEEEEEEE3</option>
<option value="6">FFFFFFFF4</option>
<option value="7">GGGGGGGG3</option>
<option value="8">HHHHHHHH5</option>
<option value="9">TTTTTTTT4</option>
</select>
</div>
</div>
</div>
</body>
</html>