Select2 用法
http://www.cnblogs.com/wuhuacong/p/4761637.html
2.这个做详细参考
http://www.jianshu.com/p/c5ab74b91b2e
3、http://m.blog.csdn.net/u011317027/article/details/62890088
4、http://www.cnblogs.com/liuxiaobo93/p/5112993.html
5、方法api
http://a714115852.iteye.com/blog/2097033
6.方法和api
http://www.cnblogs.com/liuxiaobo93/p/5112993.html
PS: 这是三种select2调通的代码
7. 参考
http://www.51xuediannao.com/js/jquery/select2.html
8.图片修改select2
https://codepen.io/ryanjgill/pen/gcmrH
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>select2</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- select2 style -->
<link rel="stylesheet" href="css/select2.min.css"> </head> <body class="hold-transition skin-blue sidebar-mini" style="background-color:#ecf0f5;"> <input type="button" onclick="test()" value="测试"/>
<div>
<input type="text" id="i1"/>
</div>
<!-- Main content -->
<section class="content container" style="margin-top: 15px;">
<div class="col-sm-4">
<h3>本地数据方式</h3>
<select multiple="multiple" class="form-control input-sm downList1">
<option></option>
</select>
<p class="p1"></p>
<hr>
<button type="button" class="btn btn-sm btn-primary" id="one">click</button>
</div>
<div class="col-sm-4">
<h3>AJAX获取数据方式,只请求一次</h3>
<select class="form-control input-sm downList3" id="hahah" multiple="multiple">
<option></option>
</select>
<p class="p2"></p>
<hr>
<button type="button" class="btn btn-sm btn-primary" id="two">click</button>
</div>
<div class="col-sm-4">
<h3>AJAX获取数据方式</h3>
<select multiple="multiple" class="form-control input-sm downList2" id="xxx">
<option></option>
</select>
<p class="p2"></p>
<hr>
<button type="button" class="btn btn-sm btn-primary" id="two">click</button>
</div>
</section><!-- /.content --> <script src="js/jquery-2.0.3.min.js"></script>
<script src="js/select2.full.js"></script>
<script src="js/zh-CN.js"></script>
</body>
<script>
var oneReq = [];
$("#i1").on("focusout",function(){
alert("f");
});
function test(){ } $(function(){ $.ajax({
type:"get",
url:"http://127.0.0.1:8020/Test/test.json",
dataType:"json",
asynchronous:true,
contentType:"application/json",
success:function(data){
//alert("success");
var data1 = $(data.items);
var result = [];
$.each(data1,function(infoIndex,info){ if(info.business == "" && info.owner == "")
{ result.push({id: infoIndex, text: info.name});
}
else{
//$("#e2").addNewTag("444");
result.push({id: infoIndex, text: info.name+ ":"+ info.owner + "," + info.business});
} })
oneReq = result;
$("#hahah").select2({
data: oneReq,
placeholder:'请选择',//默认文字提示
language: "zh-CN",//汉化
allowClear: true//允许清空
}) //alert($(oneReq).size());
},
error:function(data){
alert("lose");
}
}); })
//one 本地数据方式
var dataList = [
{ id: 0, text: 'enhancement' },
{ id: 1, text: 'bug' },
{ id: 2, text: 'duplicate' },
{ id: 3, text: 'invalid' },
{ id: 4, text: 'wontfix' }
]; //var str = "{'id':'0','text':'bug'}";
//var obj = JSON.parse(str); // --> parse error
//var json1 = eval('(' + str + ')');
//alert(json1.t);
$(".downList1").select2({
data: dataList,
placeholder:'请选择',//默认文字提示
language: "zh-CN",
allowClear: true//允许清空
})
$('#one').click(function(){
var id = $(".downList1").select2("data")[0].id;
var text = $(".downList1").select2("data")[0].text;
var html = '您选择了：' + '{ id:' + id + ', ' + 'text: ' + text + ' }';
$('.p1').text(html);
}) // alert($(oneReq).size()); //two AJAX获取数据方式
$("#xxx").select2({
ajax: {
type:"get",
url: "http://127.0.0.1:8020/Test/test.json",
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 = [];
//alert("xxxxxxxx");
console.log(data);
var data1 = $(data.items);
$.each(data1,function(infoIndex,info){ if(info.business == "" && info.owner == "")
{ itemList.push({id: infoIndex, text: info.name});
}
else{
//$("#e2").addNewTag("444");
itemList.push({id: infoIndex, text: info.name+ ":"+ info.owner + "," + info.business});
} })
/*for(var i=0; i<data1.size(); i++){ if(data1.business == "" && data1.owner == "")
{
itemList.push({id: i, text: $(data1.name)});
//$("<option value="+info.name+">"+info.name+"</option>").appendTo($("#e2"));
}
else{
//$("#e2").addNewTag("444");
itemList.push({id: i, text: data1.name+ ":"+ data1.owner + "," + data1.business});
//$("<option value="+info.name+">"+info.name + ":"+ info.owner + "," + info.business+"</option>").appendTo($("#e2"));
}
}*/ return {
results: itemList, //data.items,
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;} // 函数用于呈现当前的选择
});
$('#two').click(function(){
var id = $(".downList2").select2("data")[0].id;
var text = $(".downList2").select2("data")[0].text;
var html = '您选择了：' + '{ id:' + id + ', ' + 'text: ' + text + ' }';
$('.p2').text(html);
})
</script> </html>
Select2 用法的更多相关文章
- html select美化模拟jquery插件select2.js
代码展示:http://www.51xuediannao.com/demo.php 代码说明: select2.js是一个html select美化模拟类jquery插件,但是select2.js又远 ...
- select2的基本用法
公司有个项目需要用到类似百度搜索功能的下拉框,自然想到使用select2. 先看下select2的效果图,如下: 下来简单介绍下这个控件的基本用法,主要简单介绍下远程加载数据: 1.首先引入需要的文件 ...
- jQuery的下拉选select2插件用法
1转自:https://www.jb51.net/article/95561.htm 用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉 ...
- select2插件用法
1.修改默认查询方法,使其可以根据value查询 this.element.select2({ allowClear: true, matcher: function (term, text, ele ...
- select2的用法
<link href="../css/select2.min.css" rel="stylesheet" /> <script src=&qu ...
- 01：jQuery的下拉选select2插件用法
1.1 select2插件基本使用 1.下载select2插件 1. 下载地址:https://github.com/select2/select2 2.官网地址:https://select2.or ...
- JS组件系列——Bootstrap Select2组件使用小结
前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到 ...
- jQuery 事件用法详解
jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...
- 下拉框插件select2的使用
它的优点有: 样式还算好看,支持多选,支持索搜 下面来介绍下select2的用法 1.最简单的用法 只需要加载css和js即可使用 <select name="" id=&q ...
随机推荐
- 测序中Q20 Q30 Q40
你能给别人讲清楚这个概念吗? 二代测序中,每测一个碱基会给出一个相应的质量值,这个质量值是衡量测序准确度的.碱基的质量值13,错误率为5%,20的错误率为1%,30的错误率为0.1%.行业中Q20与Q ...
- LeetCode--083--删除排序链表中的重复元素
问题描述: 给定一个排序链表,删除所有重复的元素,使得每个元素只出现一次. 示例 1: 输入: 1->1->2 输出: 1->2 示例 2: 输入: 1->1->2-&g ...
- 《图解Http》8: 用户身份认证Cookie管理session; 9:HTTP的追加协议（websoket, webDAV）
基本认证,(安全等级低,多数网站不使用) Digest认证:(也不怎么用) SSL客户端认证:(凭借客户端证书认证,如网银登陆) 表单认证:用户名/密码.(常用) SSL客户端认证采用two-fact ...
- spoj Help the Military Recruitment Office!
题意:给出名字和地方,地方会重定向,最后再给出名字,问现在属于哪里? 用并查集. //#pragma comment(linker,"/STACK:1024000000,1024000000 ...
- 『科学计算』L0、L1与L2范数_理解
『教程』L0.L1与L2范数 一.L0范数.L1范数.参数稀疏 L0范数是指向量中非0的元素的个数.如果我们用L0范数来规则化一个参数矩阵W的话,就是希望W的大部分元素都是0,换句话说,让参数W是稀 ...
- zzuli1427 NO.6校赛----数字转换
1427: 数字转换 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 572 Solved: 153 SubmitStatusWeb Board Des ...
- Oracle11g温习-第三章：instance实例管理
2013年4月27日 星期六 10:30 1.instance 功能: 用于管理和访问database. 2.init parameter files :管理实例相关启动参数.位置:$ORACLE ...
- html5- 摘自网友dudu
HTML5中新增了<canvas>画布标签,通过它,可以使用JavaScript在网页中绘制图像.<canvas>标签在网页中得到的是一个矩形空白区域,可以通过width和he ...
- pos提交提交数据时碰到Django csrf
我的github(PS:希望star):https://github.com/thWinterSun/v-admin 最近在用Vue写前端代码,再用vue-resource向后台提交数据.项目后台是用 ...
- 51nod1295
题解: 考虑到是异或,那么就是位运算 位运算会想到什么?当然是按位拆开 那么就变成了一个个的字符串 考虑了trie 可是貌似有多个问题 那么就用可持久化trie! 代码: #include<bi ...