前端插件一：jQuery Multi-Select多选插件（支持模糊查询）

最近项目需要下拉多选框，就百度找个插件，自己调了下，现在分享给大家，方便大家共同学习，话不多说直接上代码

<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/

前端插件一：jQuery Multi-Select多选插件（支持模糊查询）

猜你喜欢