拾荒者
看过太多的文字,有时候却忘记了思考。在这里,把自己的思考,想法用文字记录下来,这也是一种修行!
2014-10-24  

SELECT2 说明

介绍:

          select是一个优化下拉框select的jQuery插件,它支持搜索(搜索选择)、远程数据集、以及无限滚动的结果。最近的还支持下拉分组,下拉标签。同时,提供了很多相关的方法,比如获取下拉选项值val,下拉选项ID,下拉选项jQuery对象节点等。


使用:

          因为是jQuery插件,必须引入jQuery插件,select2的样式文件、插件Select2的脚本。


          样式和脚本引用:

          <link rel="stylesheet" href="css/select2.css" />——样式文件
          <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>——jQuery文件
          <script src="js/select2.min.js"></script>——插件脚本文件
          <script src='js/select2_locale_zh-CN.js'></script>——提示的中文版本


          HTML代码:

          <select id="selectDom" name="selectDom">

               <option id="down1">下拉选项1</option>

               <option id="down1">下拉选项1</option>

               <option id="down1">下拉选项1</option>

          </select>


          JS使用:

          $(function(){

               $("#selectDom").select2();

          });


支持多选:

          <select id="selectDom1" name="selectDom1" multiple="multiple">

               <option id="down1">多选项1</option>

               <option id="down2">多选项2</option>

               <option id="down3">多选项3</option>

               <option id="down4">多选项4</option>

          </select>


          可以得到如下选择的项:

            效果:          

        

            

占位符的文字是“select a state"


          

          HTML代码:

          <option id="selectDom3" name="selectDom3">

               <option></option>

               <option>占位符选项1</option>

               <option>占位符选项2</option>

               <option>占位符选项3</option>

          </option>


          JS代码:

          $(function(){

               $("#selectDom3").select2({

                    placeholder:"请选择一个内容",——定义占位文字内容

                    allowClear:true——是否允许清空选项

               });

          });


          此外还可以直接在HTML代码中使用data-placeholder="xxx",来定义占位文字内容,例如:

          <select data-placeholder="请选择一个内容" id="selectDom3" name="selectDom3">....</option>


          PS:需要注意的是,这里必须在选项的头部,定义一个空的<option></option>,如上面HTML代码红色标注的部分。


快速检索:

          通过在下拉出现的文本框中输入选项的一个或多个字符,找出相关的下拉选项

          效果:

          我在检索框中输入天津,下拉列表就会列出所有包涵”天津“字符的下拉选项




HTML代码:

     <select id="selectDom4" name="selectDom4" >
               <option id="al" data-foo="fooal" value="al">福建省</option>
               <option id="bai"  data-foo="foobai"  value="bai">天津市</option>
               <option id="bai"  data-foo="foobai"  value="bai">天津分局一</option>
               <option id="bai"  data-foo="foobai"  value="bai">天津分局二</option>
               <option id="bai"  data-foo="foobai"  value="bai">天津分局三</option>

     </select>


JS代码:

$(function(){

     $("#selectDom4").select2({

          minimumInputLength:2 ——至少输入两个字符,才能完成检索

     });

});


替换下拉项的样式:

          例如可以为下拉项添加图片:


 这里说明一下为什么可以这样,是因为,这个下拉框是select2使用 ul、li模拟出来的,所以下拉选项中可以放置图片。


     JS代码:

     $(function(){

          

          //定义一个格式化下拉选项的函数

          function format(state){
               if(!state.id) return state.text;//如果选项不存在ID,就是下拉的组节点optgroup
               return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;

          }

     

          //format会遍历执行,state表示每个下拉选项,可以通过state.element获取当前选项的HTML对象


 $("#selectDom").select2({

      formatResult: format, //使用函数format,格式化下拉选项的结构

      formatSelection: format, //使用函数format,重新渲染定义下拉选项的内容

      escapeMarkup: function(m) { return m; } //转义重新渲染的下拉选项,防止脚本注入

  });

     });


使用数组定义下拉选项的内容:

     下拉选项的每一个下拉选项都必须有一个ID和TEXT属性,例如下面一个下拉列表的数组数据:

     var data=[

          {id:1,text:'text01'},

          {id:2,text:'text02'},

          {id:3,text:'text03'},

          {id:4,text:'text04'},

     ]

     


    使用:

     $(function(){ 

          $("#selectDom").select2({

               data:data

          }); 

     });


     当然,你也不一定必须使用id和text来定义,我们通过一个函数,修改数据的格式,例如

     function format(item){

          return item.tag;

     }

     就可以使用tag来替代text属性,然后初始化:

     $("#selectDom").select2({

          data:{results:data,text:'tag'},

          formatSelection:format,

          formatResult:format

     });


     也可以如下的写法:

     $("#selectDom").select2({

          data:{results:data,text:function(item){ return item.tag }},

          formatSelection:format,

          formatResult:format

     });


     $("#e10_4").select2({

          data:function() { return { text:'tag', results: data }; },

          formatSelection: format,

          formatResult: format

     });


使用ajax载入远程数据:

     正在理解


无限滚动的下拉数据列表:

     正在理解


Select2的属性列表:

     width_字符串

     minimumInputLength_

     maximumInputLength_

     minimumResultsForSearch_

     maximumSelectionSize_

     placeholder_

     placeholderOption_

     separator_

     allowClear_

     multiple_

     closeOnSelect_

     openOnEnter_

     id_function

     matcher_function

     sortResults_function

     formatSelection_function

     formatResult_function

     formatResultCssClass_function

     formatNoMatches_string

     formatSearching_string/function

     formatAjaxError_string/function

     formatInputTooShort_string/function

     formatInputTooLong_string/function

     formatSelectionTooBig_string/function

     formatLoadMore_string/function

     createSearchChoice_function

     createSearchChoicePosition_string/function

     ....

     ajax

     


Select2的事件列表:

     change——修改下拉选项的时候

     select2-opening——在展开下拉列表之前

     select2-open——在下拉列表展开之后

     select2-close——在下拉礼拜收起之后

     select2-highlight——对下拉选项高光选项的操作

     select2-selecting——

     select2-clearing——清空选项之后

     select2-removing——

     select2-removed

     select2-loaded——下拉的内容更新的时候,更新完成

     select2-focus——下拉选项聚焦

     select2-blur——下拉选项失去焦点


    


评论
热度(1)
©拾荒者 | Powered by LOFTER