js智能下拉插件select2使用教程
下面介绍select2.js的方法，已经整理好文件，可以直接下载使用：
实现效果如下：
引用文件：select2.min.css jquery.js select2.full.min.js
html代码：
|
<h3>本地数据方式</h3> <select class="form-control input-sm downList1"> <option></option> </select> <h3>AJAX获取数据方式</h3> <select class="form-control input-sm downList2"> <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获取数据方式 $(".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'); |
效果图如下：
