<link href="../jQuery.multiselect.css" rel="stylesheet"/>
<link href="../jquery.multiselect.filter.css" rel="stylesheet"/>
<script type="text/JavaScript" src="../jquery.multiselect.js"></script>
<script type="text/javascript" src="../jquery.multiselect.filter.js"></script>
js部分:
$(document).ready(function(){
$("#sceneIdSelectBox").multiselect({
multiple: true,
header: false,
noneSelectedText: '请选择',
selectedList:5,
minWidth:160,
height:100
});
//初始化默认选中已有的选项,sceneIdList是要默认选中的值
var sceneIdList = "1,2,3";
sceneIdArr = sceneIdList.split(",");
$('#sceneIdSelectBox option').each(function(i,content){
//alert(i+"***"+content.value);
if($.inArray($.trim(content.value),sceneIdArr)>=0){
this.selected=true;
}
});
//设置选中值后,需要刷新select控件
$("#sceneIdSelectBox").multiselect('refresh');
jsp部分:
<select id="sceneIdSelectBox" name="sceneIdSelectBox" multiple="multiple" class="fleft ">
<c:forEach var="dimScenes" items="${dimScenesList}" varStatus="st">
<c:if test="${dimScenes.sortNum > 0}">
<option value="${dimScenes.sceneId}">${dimScenes.sceneName}</option>
</c:if>
</c:forEach>
</select>
备注: dimScenesList是在后台从数据中查出的列表,用于展现为下拉列表
//下面是获取选中的值,值的形式是逗号分隔,eg:"1,2"
var sceneIdsStr = $("select").multiselect("getChecked").map(function(){
return this.value;
}).get();
select 属性加上multiple="multiple",会默认显示为空,不加的话会默认选中第一项
多选框选中值:
var yhctlModel = $("#multiSelect").multiselect("getChecked").map(function(){ return this.value; }).get(); console.info(yhctlModel);
注意:模态窗口里边不能使用jquery的多选下拉列表框。而bootstrap的可以