select2 使用

1.官网 地址   https://select2.github.io/

 

2. 使用

  

   <!-- select2 -->
   <link rel="stylesheet" href="${ctx}/static/comp/select2/css/select2.min.css">
   <script src="${ctx}/static/comp/select2/js/select2.min.js"></script>

 

<select id="port_id" class="form-control">
                    <option>全部</option>
                    <option>站点001</option>
                    <option>站点002</option>
                </select>

<script >
  $(function (){
        	  $("#port_id").select2({
        		  width:"100px",
        		  minimumResultsForSearch: -1
        		  
        	  });
          });
</script>

 3 .api

      width                                                    宽度  字符串

       minimumResultsForSearch             设置为 -1  ，去掉 搜索框

       placeholder                                        选择框中 显示的提示文字  

       allowClear: true                                   是否有 清除的符号（有个叉号 点击清除  ）             

4.说明

     （1）select2 的 数据源属性为 id 、text； id为value，text为select标签显示的字符串

      （2）有两种数据源加载方式 

                 静态数组的数据源：

              

<script type="text/javascript">

 

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

 

$(".js-example-data-array").select2({
  data: data
})

$(".js-example-data-array-selected").select2({
  data: data
})
</script>

<select class="js-example-data-array"></select>

<select class="js-example-data-array-selected">
  <option value="2" selected="selected">duplicate</option>
</select>

          另一种是 ajax方式

     

    $("#area").select2({
	    width:"200px",
        minimumResultsForSearch:-1,
	    placeholder:"请选择",
		    ajax: {
		        url: path + "/province/provinceCombobox",
		        dataType: 'json',
		        delay: 200,
	            processResults: function (data, params) {
                                  // 如果 接口数据 格式 格式 id、text 则 转化一下
                                  data = $.map(data, function (obj) {
			  		  obj.id = obj.id || obj.code;
			  		  obj.text = obj.text || obj.name;
			  		  return obj;
			          });
	                return {
	                  results: data
	                };
	              }
		    }
    }); 
//ajax 返回 id、text 为对象的 数组；关键 的地方 processResults 函数中 处理返回值 { results: data};