浅析Select2的使用

    在生活中我们可能会遇到这样的场景，大学选课时，需要选择多门课程，这样的场景在项目中也经常遇见，比如在管理一个公司时，可能要输入公司的各部门分别进行管理，当然，实现的方法有很多种，下面我就以此例来说明select2的简单使用。

一、导入相应的jar包。

Maven 仓库地址：http://www.mvnjar.com/org.webjars.bower/select2/3.5.2/detail.html；

需要导入：

                <script type="text/javascript" src="../bootstrap/js/jquery.min.js" ></script>
<!--<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js" ></script>-->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="../select2-3.5.3/select2.css" />
<link rel="stylesheet" href="../select2-3.5.3/select2-bootstrap.css" />

<script type="text/javascript" src="../select2-3.5.3/select2.js" ></script>

注意：jquery .js：注意版本，网上说要1.8.3以上的版本。

            select2低版本的可能还会有select2.full.js，

二、显示效果

说明：1、该选择框可以进行多选，

            2、同时支持搜索匹配，

        3、对于不包含的字段可以自动添加进选择框。

三、js代码

 function openSelect2(){
		  $("#e1").select2({
			   placeholder:"请输入公司部门",    //选择框提示操作
			  multiple:true,                    //支持多选
			  createSearchChoice:                //如果该选择框没有你输入的值，会自动创建
	        		function(term, data) { 
	        			if ($(data).filter(function() { 
	        				return this.text.localeCompare(term)===0; })
	        			.length===0) {
	        				return {id:term, text:term};
	        			} 
	        		},
	    
			   ajax:{                            //该方法是到后台读取选择框的值
				   url:dep_url,                //请求路径
				   dataType:'json',
				   results:function(data){
					   return{
						   results:data.data   //返回值，必须为[{id:xx,text:xx},...]的格式
					   };
				   },
				   cache:true                        //开启缓存
			   },//ajax
			    escapeMarkup: function (markup) { return markup; },    //格式化成html格式
			    formatSelection : function formatRepo(repo) {       //选中一个后返回值
			      $("#e1").val(repo.text);                            //设置下拉框的value
			      return repo.text;
			   },  
			   formatResult: function formatRepoSelection(repo) {        //取出返回值的text字段内容，添加到
				  
			      return repo.text;
			   }
		   });  
		
	 }

说明：使用     

createSearchChoice：属性，前台不能使用select标签，必须使用 <input type="hidden" id="e1"> 

         四、关于动态默认选择，很多情况下我们需要选择框自动初始化选择自己的属性，例如，当我们选择某个公司的时候，select2框自动选择该回公司所登记的部门，本人也是在网上查询了一些资料，使用了initSelection等属性，但是都没有找到想要的效果。

最后通过ajax来实现：

  

	 $.ajax({
			url:contextPath",//请求路径
			data:{"id":nid},
			dataType:"json",
			async:false,
			success:function(result){
				 $("#e1").select2("data", result.data); //这里面的result.data,就是某一个公司下的部门信息，同样是[{id:xx,text:xx}]格式
				 
			}
			 
		 })

通过重新赋值来达到想要的效果。

对于静态的默认选中，网上有很多方法，可自行搜索。

五、关于取值，通过

$("#e1").select2('val');//获得选择框的值。