最近项目需要下拉多选框,就百度找个插件,自己调了下,现在分享给大家,方便大家共同学习,话不多说直接上代码
<html>
<head>
<link href='../multi-select.css' rel='stylesheet'>
</head>
<body>
<input class="inputxt" name="ycmn" value="" style="width: 500px;">
<select id="optgroup" multiple="multiple">
<c:forEach items="${site}" var="site">
<option value="${site.mnNumber}">${site.mnNumber}</option>
</c:forEach>
</select>
<script src='../jquery-1.11.2.min.js' type='text/javascript'></script>
<script src='../jquery.multi-select.js' type='text/javascript'></script>
</body>
</html>
插件资源CSS 和 js 下载可以到 http://loudev.com/
下面是JavaScript
<script type="text/javascript"> $(document).ready(function() { // 初始化 $('#optgroup').multiSelect({ selectableHeader: '<i class="fa fa-search pull-right p-r-sm" style="position:relative;top:9px;z-index:1;"></i><input class="search-input col-sm-12 border text-size-sm p-r-xl" type="text" placeholder="选择设备" style="border-bottom:0;border-radius:3px 3px 0 0;padding-top:3px;padding-bottom:3px;margin-top:-13px;;width:160px;">', selectionHeader: '<input class="col-sm-12 border bg-white text-size-sm" type="text" disabled placeholder="已选设备" style="border-bottom:0;border-radius:3px 3px 0 0;padding-top:3px;padding-bottom:3px;width:160px;">', selectableOptgroup: true, afterSelect: function (values) { // select.modifyselectNum('#optgroup'); var sel = $("#optgroup").val(); //alert(sel); document.getElementById("ycmn").value = sel; }, afterDeselect: function (values) { // select.modifyselectNum('#optgroup'); var sel = $("#optgroup").val(); //alert(sel); document.getElementById("ycmn").value = sel; } }); // 可选全选按钮 暂时没用到 $('button.selectAll').click(function(){ $('#optgroup').multiSelect('select_all'); return false; }); // 已选全选按钮 暂时没用到 $('button.deselectAll').click(function(){ $('#optgroup').multiSelect('deselect_all'); return false; }); // 搜索框实时查询 $('input.search-input').on('input propertychange', function() { var inputValue = $(this).val().trim(); var $selections = $('#optgroup').siblings('.ms-container').find('.ms-selectable li.ms-elem-selectable'); $selections.each(function () { var thisValue = $(this).children('span').text(); if (thisValue.match(inputValue)) { $(this).show(); } else { $(this).hide(); } }); }); //默认值 var mn = '${mn}'; // alert("mn-------"+mn); if(mn != null){ var array = mn.split(","); $('#optgroup').multiSelect('select',array); } }); </script>
接下来是Controller
@RequestMapping(params = "addorupdate") public ModelAndView addorupdate(TSUser user, HttpServletRequest req) {
ModelAndView model = new ModelAndView("system/user/user"); String sql = "from TSSiteEntity "; List<TSSiteEntity> list = this.systemService.findByQueryString(sql); model.addObject("site",list); String mn = user.getYcmn(); model.addObject("mn",mn);
return model;
}
最后附一张效果图
更多方法和实例请参考 http://loudev.com/