jQuery的下拉选select2插件用法

时间 2019-12-05

标签 jquery 下拉 select2 select 插件用法栏目 JQuery 繁體版

原文原文链接

1转自：https://www.jb51.net/article/95561.htmcss

用了这么久的Select2插件，也该写篇文章总结总结。当初感受Select2不是特别好用，但又找不到比它更好的下拉框插件。jquery

在个人印象里Select2有2个版本，最新版本有一些新的特性，而且更新了一下方法参数，比最第一版本要好看一些，本文针对新版本。ajax

演示：
json

因为博客系统的缘由，因此只能演示简单的功能。数组

一.文件须要引入select2.full.js、select2.min.css（4.0.1版本）和jquery.1.8.3及以上服务器

最新版本的select2若是引用的jquery版本较低的话，某些功能没法正常使用。好比：清除功能allowClear: trueapp

最新版本请使用<select></select>标签（对于本地化的数据你可使用input，但ajax远程数据必须使用select）学习

二.placeholderurl

placeholder占位提示文字，若是须要清楚功能，则必须设置placeholder。spa

三.加载本地数据

select2默认的数据属性是id、text，新版本能够自定义，但仍是用默认的比较好。因此提供的json中最好转换为id、text形式，固然能够添加其余属性。

 
         var 
         data = [{ id: 0, text:  
         'enhancement' 
         }, { id: 1, text:  
         'bug' 
         }, { id: 2, text:  
         'duplicate' 
         }, { id: 3, text:  
         'invalid' 
         }, { id: 4, text:  
         'wontfix' 
         }]; 
        
 
         $( 
         "#c01-select" 
         ).select2({ 
        
 
           
         data: data, 
        
 
           
         placeholder: 
         '请选择' 
         , 
        
 
           
         allowClear: 
         true 
        
 
         }) 
        

四.加载远程数据

 
         $( 
         "#c01-select" 
         ).select2({ 
        
         ajax: { 
        
         url:  
         "data.json" 
         , 
        
         dataType:  
         'json' 
         , 
        
         delay: 250, 
        
         data:  
         function 
         (params) { 
        
         return 
         { 
        
         q: params.term, 
        
         }; 
        
         }, 
        
         processResults:  
         function 
         (data) { 
        
         return 
         { 
        
         results: data 
        
         }; 
        
         }, 
        
         cache:  
         true 
        
         }, 
        
         escapeMarkup:  
         function 
         (markup) {  
         return 
         markup; },  
        
         minimumInputLength: 1, 
        
         templateResult: formatRepo,  
        
         templateSelection: formatRepoSelection  
        
         });

说明：

1.q: params.term 查询参数（params.term表示输入框中内容，q发生到服务器的参数名；因此这里你能够添加自定义参数，如：stype:'person'）

2.processResults中results: data返回数据（返回最终数据给results，若是个人数据在data.res下，则返回data.res。这个与服务器返回json有关）

3.minimumInputLength 最小须要输入多少个字符才进行查询，与之相关的maximumSelectionLength表示最大输入限制。

4.escapeMarkup字符转义处理

5.templateResult返回结果回调function formatRepo(repo){return repo.text},这样就能够将返回结果的的text显示到下拉框里，固然你能够return repo.text+"1";等

6.templateSelection选中项回调function formatRepoSelection(repo){return repo.text}

7.关于返回的 json的格式：select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}]，新版严格要求这样的格式，固然你能够添加列，如：[{id:1,text:'text',name:'liu'}]

五.获取选中项

 
         var 
         res=$( 
         "#c01-select" 
         ).select2( 
         "data" 
         )[0] ;  
         //单选 
        
         var 
         reslist=$( 
         "#c01-select" 
         ).select2( 
         "data" 
         );  
         //多选 
        
         if 
         (res==undefined) 
        
         { 
        
         alert( 
         "你没有选中任何项" 
         ); 
        
         } 
        
         if 
         (reslist.length) 
        
         { 
        
         alert( 
         "你选中任何项" 
         ); 
        
         }

六.清空选择项和设置不可用

 
         //清空选择 
        
 
         $( 
         "#c01-select" 
         ).val( 
         null 
         ).trigger( 
         "change" 
         ); 
        
 
         $( 
         "#c01-select" 
         ).val( 
         "你的placeholder" 
         ).trigger( 
         "change" 
         ); 
         //或者 
        
 
         //若是你使用的是input标签（默认就是本地数据），你能够用$("#c01-select").val('');来清空选项 
        
 
         //disabled 
        
 
         $( 
         "#c01-select" 
         ).prop( 
         "disabled" 
         ,  
         false 
         ); 
         //可用 
        
 
         $( 
         "#c01-select" 
         ).prop( 
         "disabled" 
         ,  
         true 
         ); 
         //不可用 
        

七.启用多选

 
         $( 
         "#c01-select" 
         ).select2({ 
        
         data:data, 
        
         multiple:  
         true 
        
         });

多选演示：

八.下面简单说明新版与老版对比

1.结果回调和选中回调名称：formatResult、formatSelection（老版）；templateResult、templateSelection（新版）

2.初始化：

 
         //老版，注意若是初始化时文本框中自己没有值（为空），则不会触发该方法 
        
         initSelection:  
         function 
         (element, callback) { 
        
         var 
         id = $(element).val(); 
        
         var 
         data = { id: id, text: id}; 
         //这里是初始化的数据，你能够经过id来从服务器上获取（ajax），再装载进去 
        
         callback(data); 
        
         } 
        
         //新版，直接给select添加option 
        
         $( 
         "#id" 
         ).append( 
         new 
         Option( 
         "Jquery" 
         , 10001,  
         false 
         ,  
         true 
         )); 
        
         //或者 
        
         $( 
         "#id" 
         ).append( 
         "<option value='10001'>Jquery</option>" 
         );

3.获取或设置值：select2("val")（老版）；$("select").val()（新版）

推荐使用

1 2	`var` `res = $(` `"#id"` `).select2(` `"data"` `);` `//返回数组，单选就取res[0]；好处是不进能够获取id、text还能够获取其余属性，如res[0].names`

4.停用或启用：$("select").enable(false);（老版）；$("select").prop("disabled", true);（新版）

5.主题样式：新版的样式已经更新，但若是想使用老版样式则能够设置 theme: "classic"

若是你们还想深刻学习，能够点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。