select2使用技巧（本地数据及AJAX远程请求方式）

之前分享一款js智能下拉插件，但是在火狐浏览器使用的时候，对中文的支持不友好，切换中文输入法的时候，功能就失效了；
现在重新分享一款插件及使用心得和一些技巧，体验会比较好，样式也美观！
下面介绍select2.js的方法，已经整理好文件，可以直接下载使用：

实现效果如下： 引用文件：select2.min.css jquery.js select2.full.min.js

html

<h3>本地数据方式</h3> <select> <option></option> </select> <h3>AJAX获取数据方式</h3> <select> <option></option> </select>

本地数据方式：
html的select中的option是可选的，如果不写一个空的option标签，则默认选择第一项；如果写了option标签，则默认为空，但调用的时候，最好设置placeholder属性，为了美观；AJAX获取数据方式：
html的select中的option是必选的

javascript

<script type="text/javascript"> //one 本地数据方式 var dataList = [ { id: 0, text: 'ljiong.com(老囧博客)' }, { id: 1, text: 'Ants(蚂蚁)' }, { id: 2, text: 'can you speak javascript(你能讲JavaScript嘛)' }, { id: 3, text: 'vae(许嵩)' }, { id: 4, text: 'Badminton(羽毛球)' } ]; $(".downList1").select2({ data: dataList, placeholder:'请选择',//默认文字提示 language: "zh-CN",//汉化 allowClear: true//允许清空 }) //two AJAX获取数据方式(请求一次) var oneReq = []; $.ajax({ type:"post", url:"URL", dataType:"json", contentType:"application/json", success:function(data){ oneReq = data; }, error:function(data){ } }); $(".downList2").select2({ data: oneReq, placeholder:'请选择',//默认文字提示 language: "zh-CN",//汉化 allowClear: true//允许清空 }) //two AJAX获取数据方式(每次请求) $(".downList2").select2({ ajax: { type:'GET', url: "url", dataType: 'json', delay: 250, data: function (params) { return { q: params.term, // search term 请求参数 page: params.page }; }, processResults: function (data, params) { params.page = params.page || 1; /*var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候，可以使用类似此方法创建新的数组对象 var arr = data.result.list for(item in arr){ itemList.push({id: item, text: arr[item]}) }*/ return { results: data.items,//itemList pagination: { more: (params.page * 30) < data.total_count } }; }, cache: true }, placeholder:'请选择',//默认文字提示 language: "zh-CN", tags: true,//允许手动添加 allowClear: true,//允许清空 escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入 minimumInputLength: 1,//最少输入多少个字符后开始查询 formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果 formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择 }); </script>

获取选中的值

获取id： $(".downList2").select2("data")[0].id; 获取text： $(".downList2").select2("data")[0].text; 也可使用一下方式取值： $(".downList2").val(); $(".downList2").select2('val');

注意：在线演示中的AJAX方式是无法获取数据的，因为请求地址我没有配置，需下载自行配置方可！

查看下载： 源码下载

觉得不错，赞助我：

0

效果图如下：