select2使用技巧（本地数据及AJAX远程请求方式）
select2使用技巧（本地数据及AJAX远程请求方式）
之前分享一款js智能下拉插件，但是在火狐浏览器使用的时候，对中文的支持不友好，切换中文输入法的时候，功能就失效了；
现在重新分享一款插件及使用心得和一些技巧，体验会比较好，样式也美观！
下面介绍select2.js的方法，已经整理好文件，可以直接下载使用：
实现效果如下： 引用文件：select2.min.css jquery.js select2.full.min.js
&h3&本地数据方式&/h3&
&select class="form-control input-sm downList1"&
&option&&/option&
&h3&AJAX获取数据方式&/h3&
&select class="form-control input-sm downList2"&
&option&&/option&
本地数据方式：
html的select中的option是可选的，如果不写一个空的option标签，则默认选择第一项；如果写了option标签，则默认为空，但调用的时候，最好设置placeholder属性，为了美观；AJAX获取数据方式：
html的select中的option是必选的
javascript
&script type="text/javascript"&
//one 本地数据方式
var dataList = [
{ id: 0, text: '(老囧博客)' },
{ 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 = [];
type:"post",
url:"URL",
dataType:"json",
contentType:"application/json",
success:function(data){
error:function(data){
$(".downList2").select2({
data: oneReq,
placeholder:'请选择',//默认文字提示
language: "zh-CN",//汉化
allowClear: true//允许清空
//two AJAX获取数据方式(每次请求)
$(".downList2").select2({
type:'GET',
url: "url",
dataType: 'json',
delay: 250,
data: function (params) {
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]})
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) { }, // 自定义格式化防止xss注入
minimumInputLength: 1,//最少输入多少个字符后开始查询
formatResult: function formatRepo(repo){return repo.}, // 函数用来渲染结果
formatSelection: function formatRepoSelection(repo){return repo.} // 函数用于呈现当前的选择
获取选中的值
获取id： $(".downList2").select2("data")[0].
获取text： $(".downList2").select2("data")[0].
也可使用一下方式取值：
$(".downList2").val();
$(".downList2").select2('val');
注意：在线演示中的AJAX方式是无法获取数据的，因为请求地址我没有配置，需下载自行配置方可！
查看下载：
觉得不错，赞助我：
效果图如下：
Copyright 2014 allright reserved.JS组件Bootstrap Select2使用方法解析
作者：伤痕小丑鱼
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了JS组件Bootstrap Select2使用方法，感兴趣的小伙伴们可以参考一下
本文总结了组件Bootstrap Select2在一些实际项目中的用法，分享给大家，有需要的朋友可以借鉴一下，少走些弯路，具体内容如下
无论是固定方式获取数据还是ajax获取都需要引入bootstrap.js/css 和 select2.js/css及：
{{ stylesheet_link('css/bootstrap.css') }}
{{ stylesheet_link('css/select2.min.css') }}
{{ stylesheet_link('css/font-awesome.min.css') }}
{{ stylesheet_link('css/prettify.css') }}
{{ javascript_include('js/lib/jquery.js') }}
{{ javascript_include('js/lib/select2.full.js') }}
{{ javascript_include('js/lib/bootstrap.js') }}
&div class="container"&
&section id="tags" class="row"&
&div class="col-md-4"&
&select class="js-example-tags form-control" multiple="multiple"&
&option selected="selected"&orange&/option&
&option&white&/option&
&option selected="selected"&purple&/option&
&/section&
固定方式获取：
$(".js-example-tags").select2({
tags: true, //是否可以自定义tag
createSearchChoice:function(term, data) {
if ($(data).filter(function() {
return this.text.localeCompare(term)===0;
}).length===0)
{return {id:term, text:term};}
multiple: true,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
ajax方式获取：
$(".js-example-tags").select2({
// enable tagging
tags: true,
// loading remote data
// see https://select2.github.io/options.html#ajax
url: "Ask2/tags",
processResults: function (data, page) {
console.log(data);
var parsed =
var arr = [];
for(var x in parsed){
arr.push(parsed[x]); //这个应该是个json对象
console.log(arr);
results: arr
在ajax中的数据返回格式应该是这个样子滴（results）： [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
对应的php代码例子
$p1 = array(id =& "1",text=&"java");
$p2 = array(id =& "2",text=&"jvm");
$test = array(1=&$p1,2=&$p2);
$params['responseData'] = $
$this-&view-&disable();
return parent::ajaxResponse($params);
如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：
以上就是关于select2的一些用法介绍，希望对大家的学习有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具select2异步加载数据_中华文本库
select2使用总结._计算机软件及应用_IT/计算机_专业资料。&link rel=&stylesheet...第一种写死的数据的:Loading Array Data function resultFormatResult(medata) ...
默认情况下, Selenium2会自动等待页面加载完成 ? ...使用Selenium Library 数据驱动的测试与测试用例的架构...只需用Select Window结合Wait Until Keyword Succeeds...
“|” 17. 下列模式中,能够给出数据库物理存储...select dept_id, job_cat,max(salary) from ...synchronized 关键字用于实现异步 2. 下面哪些代码是...
Handler Handler Handler Handler Handler 异步/中断 ...数据发送等操作,必须 通过 write,send等系统调用,...IO多路复用(Linux2.6) ? Select(Mina与Netty原始...
描述 有效值 默认值 句执行上,对相同 SqlSession 的 不同调用将不会共享数据...&select id=&getUser2& resultMap=&usermap2&& select * from users2 &/...
2.Sybase IQ数据库典型问题介绍_IT/计算机_专业资料...数据加载需编写复杂的LOAD TABLE语句说明:可以使用...INSERT..SELECT、 INSERT..LOCATION 等语句执行时使用...
S4: 如果数据达到, 则置1.我们通常叫做 Select. ...其针脚功能如下: 针脚 功能 1 未用 2 发出数据(...异步口或一个 COM(通信)口,严格地讲 RS-232接口...
access 二级 选择2_IT认证_资格考试/认证_教育专区...加载 C:逻辑性 D:数据完整性 :D :B :C :C ...[单价]*[图书订单表]![数量] A:SELECT * FROM ...
S3C2410 UART单元提供3个独立的异步串行通信接 口,...位2决定 停止位长度,位1和位0决定每帧的数据 ...Uart_Printf(&\nSelect UART channel[0:UART0;1:...
该模式的建立基于以下两点:1、非对等作用;2、通 信完全是异步的。客户机/服务...参数:buf:指向存有传输数据的缓冲区的指针。 6、多路复用——select() 多路...博客分类：
在[]说明了jquery select2的基本使用，今天将select2 ajax服务端获取数据的例子做一下说明。并总结一下我在项目中遇到的几个问题。
1、服务端例子：
页面结构html：
&input type="text" id="num"&
$(document).ready(function({
$("#num").select2({
placeholder:"输入一个AS号码",//文本框的提示信息
minimumInputLength:1, //至少输入n个字符，才去加载数据
allowClear: true, //是否允许用户清除文本信息
url:'${pageContext.request.contextPath }/……!getASNumber.do', //地址
dataType:'text', //接收的数据类型
//contentType:'application/json',
data: function (term, pageNo) {
//在查询时向服务器端传输的数据
term = $.trim(term);
autNumber: term,
//联动查询的字符
pageSize: 15, //一次性加载的数据条数
pageNo:pageNo, //页码
time:new Date()//测试
results:function(data,pageNo){
if(data.length&0){ //如果没有查询到数据，将会返回空串
var dataObj =eval("("+data+")"); //将接收到的JSON格式的字符串转换成JSON数据
var more = (pageNo*15)&dataObj. //用来判断是否还有更多数据可以加载
results:dataObj.result,more:more
return {results:data};
initSelection:function(element,callback){
//初始化，其中doName是自定义的一个属性，用来存放text的值
var id=$(element).val();
var text=$(element).attr("doName");
if(id!=''&&text!=""){
callback({id:id,text:text});
formatResult: formatAsText //渲染查询结果项
//格式化查询结果,将查询回来的id跟name放在两个div里并同行显示，后一个div靠右浮动
function formatAsText(item){
var itemFmt ="&div style='display:'&"+item.id+"&/div&&div style='float:color:#4F4F4F;display:inline'&"+item.name+"&/div&"
return itemF
需要服务器端传输的数据格式：“{'result':[{'id':'4048','text':'4808','name':'CHINA169-BJ'},{'id':'4048','text':'4808','name':'CHINA169-BJ'}],'total':'1'}”
注：返回的数据格式是json格式的，result存放的是符合查询条件的记录前n条数据的一些属性，total存放的是符合查询条件的记录的总数
在联动查询的过程中，向服务器端传送了四个参数，其中 asNumber是指定的查询的数据，pageNo和pageSize是用来做分页效果的(注：需要自己在后台根据页号跟页码实现分页) ，分别代表页码和每页的记录数，在这里先加载了15条数据，当你鼠标滚动到最底部的时候，就会根据你传的这三个参数，加载下15条的数据。
2、注意事项
清理已有的Select2的数据：
$("#selectsq").empty(); //清除下拉框option，不是会累加
Select2加载已选择的数据：
if (EditActiveModel != null) {
var tagss = new Array();
$.munityList, function (key, val) {
tagss.push(val.Id);
$("#selectsq").val(tagss).trigger("change");
Select2数据变化事件：
$("#selectsq").on("change", function (e) { ToggleProductList(); })
本文来源于：
浏览: 115493 次
来自: 上海
我表示报400错误
影非弦 写道没有这个页面详细的文件么？文档地址：https:/ ...
没有这个页面详细的文件么？
这个select.min.css是select2提供的样式文件 ...
自己写的tld怎么引用，一直报错
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。