selet2使用大全
selet2是一款input+selet结合的组件，是最好的搜索下拉框，没有之一。原因是别的没有，只有它这么一家，你没得选择。正如有人说它‘Select2不是特别好用，但又找不到比它更好的下拉框插件。’
网上对它的介绍零零碎碎，又不是特别的全面，下边我就总结了一番
单选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="plugs/select2/css/select2.min.css" />
<style>
.mysel{width: 100px;}
button{margin-top: 10px; display: block;}
</style>
</head>
<body>
<select class="mysel"></select>
<button>取值</button>
<script src="plugs/jquery-3.2.1.min.js" ></script>
<script src="plugs/select2/js/select2.full.min.js" ></script>
<script src="plugs/select2/js/i18n/zh-CN.js" ></script>
<script type="text/javascript">
//后端返回的数据
var data = [
{id:123,text:"张三",say:"呵呵"},
{id:234,text:"李四",say:"中国"},
{id:345,text:"wang",say:"你懂个屁"},
{id:456,text:"张老大",say:"okok"}
];
$(".mysel").select2({
data: data,
placeholder:'请选择',
allowClear:true,
language: 'zh-CN'
})
$("button").click(function(){
var res=$(".mysel").select2("data");
console.log(res[0])//获取选中项
console.log($(".mysel").val())//获取选中的值（id）
//tip：推荐使用第一种获取值的返回数组，单选就取res[0]；好处是不进可以获取id、text还可以获取其他属性，如res[0].say
})
</script>
</body>
</html>
特别说明：他对数据结构有要求，选项opion的对象，必须包含两个属性，id和text。id是用于取值val的，text是用于显示出来看的
多选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="plugs/select2/css/select2.min.css" />
<style>
.mysel{width: 200px;}
button{margin-top: 10px; display: block;}
</style>
</head>
<body>
<select class="mysel"></select>
<button>取值</button>
<script src="plugs/jquery-3.2.1.min.js" ></script>
<script src="plugs/select2/js/select2.full.min.js" ></script>
<script src="plugs/select2/js/i18n/zh-CN.js" ></script>
<script type="text/javascript">
//后端返回的数据
var data = [
{id:123,text:"张三",say:"呵呵"},
{id:234,text:"李四",say:"中国"},
{id:345,text:"wang",say:"你懂个屁"},
{id:456,text:"张老大",say:"okok"}
];
$(".mysel").select2({
data: data,
placeholder:'请选择',
allowClear:true,
language: 'zh-CN',
multiple: true
})
$("button").click(function(){
var res=$(".mysel").select2("data");
console.log(res)//获取选中项
console.log($(".mysel").val())//获取选中的值（id）
//tip：推荐使用第一种获取值的返回数组，单选就取res[0]；好处是不进可以获取id、text还可以获取其他属性，如res[0].say
})
</script>
</body>
</html>
设置选中项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="plugs/select2/css/select2.min.css" />
<style>
.mysel{width: 200px;}
button{margin-top: 10px; display: block; }
</style>
</head>
<body>
<select class="mysel"></select>
<button>选中某项</button>
<button>清空选中</button>
<script src="plugs/jquery-3.2.1.min.js" ></script>
<script src="plugs/select2/js/select2.full.min.js" ></script>
<script src="plugs/select2/js/i18n/zh-CN.js" ></script>
<script type="text/javascript">
//后端返回的数据
var data = [
{id:123,text:"张三",say:"呵呵"},
{id:234,text:"李四",say:"中国"},
{id:345,text:"wang",say:"你懂个屁"},
{id:456,text:"张老大",say:"okok"}
];
$(".mysel").select2({
data: data,
placeholder:'请选择',
allowClear:true,
language: 'zh-CN'
}) $("button:nth-of-type(1)").click(function(){
//手动模拟选中某一条
$(".mysel").val("345").trigger("change");
})
$("button:nth-of-type(2)").click(function(){
//手动清空选中项
$(".mysel").val(null).trigger("change");
}) $(".mysel").change(function(){alert("我被触发啦！")}) /*
tip:
1、单选初始化会默认选中第一条，而多选则默认为空
2、即便是模拟选中和清空，也会触发change事件（但是单选首次进入，插件自己默认选中的第一个不会触发change事件）
*/
</script>
</body>
</html>
动态更新option
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="plugs/select2/css/select2.min.css" />
<style>
.mysel{width: 200px;}
button{margin-top: 10px; display: block; }
</style>
</head>
<body>
<select class="mysel"></select>
<button>ajax</button>
<script src="plugs/jquery-3.2.1.min.js" ></script>
<script src="plugs/select2/js/select2.full.min.js" ></script>
<script src="plugs/select2/js/i18n/zh-CN.js" ></script>
<script type="text/javascript">
//后端返回的数据
var data = [
{id:123,text:"张三",say:"呵呵"},
{id:234,text:"李四",say:"中国"}
];
$(".mysel").select2({
data: data,
placeholder:'请选择',
allowClear:true,
language: 'zh-CN'
}) $("button").click(function(){
//模拟后端请求的数据
var ajxData=[
{id:345,text:"wang",say:"你懂个屁"},
{id:456,text:"张老大",say:"okok"}
] $(".mysel").empty();//注意清空之前的option，否则会累加
$(".mysel").select2({
data: ajxData,
placeholder:'请选择',
allowClear:true,
language: 'zh-CN'
}) }) /*tip:异步请求数据，selet2有专门做的封装处理，但是我不喜欢用*/
</script>
</body>
</html>
其它一些配置，网上就很好找了，参考其它人的网站博客：
http://www.cnblogs.com/liuxiaobo93/p/5112993.html
http://www.cnblogs.com/zzsdream/p/5665520.html
集成进入angular
这里我封装了个指令，封装的代码你们下载自己看，使用代码如下
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="lib/bootstrap/bootstrap.css" />
<link rel="stylesheet" href="lib/select2/select2.css" />
<link rel="stylesheet" href="lib/select2/select2-bootstrap.css" />
<link rel="stylesheet" href="select2Dire/main.css" />
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select2 cfg='mycfg' vlue='myval'></select2>
<button ng-click="save()">提交</button> <script src="lib/jquery-3.2.1.min.js" ></script>
<script src="lib/bootstrap/bootstrap.js" ></script>
<script src="lib/angular.js" ></script>
<script src="lib/select2/select2.js" ></script>
<script src="select2Dire/main.js" ></script>
<script>
var app = angular.module('myApp', ['ngSelect2']);
app.controller('myCtrl', function($scope,$http) {
$http.get('http://47.93.52.112:1234/').then(function(rep){
$scope.mycfg={
data: rep.data,
placeholder:'请选择',
allowClear:true,
language: 'zh-CN',
multiple: true
}
}); $scope.save=function(){
console.log($scope.myval)
}
});
</script>
</body>
</html>
效果演示
源码下载
https://gitee.com/dingshao/angular_select2.git
参考
http://www.angularjs.cn/A0AE
https://github.com/think2011/angularjs-select2
selet2使用大全的更多相关文章
- Oracle 数据库语句大全
Oracle数据库语句大全 ORACLE支持五种类型的完整性约束 NOT NULL (非空)--防止NULL值进入指定的列,在单列基础上定义,默认情况下,ORACLE允许在任何列中有NULL值. CH ...
- 开源 iOS 项目分类索引大全 － 待整理
开源 iOS 项目分类索引大全 GitHub 上大概600个开源 iOS 项目的分类和介绍,对于你挑选和使用开源项目应该有帮助 系统基础库 Category/Util sstoolkit 一套Cate ...
- .NET Core dotnet 命令大全
dotnet 命令大全,让你理解dotnet 命令. 本文将以一个实例串起 dotnet 所有命令,让你玩转dotnet 命令. 本篇文章编写环境为windows 10 ,dotnet 命令同样适用于 ...
- Python 资源大全中文版
Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-python 是 vinta 发起维护的 Python 资源列 ...
- 【JS】javascript 正则表达式 大全 总结
javascript 正则表达式 大全 总结 参考整理了一些javascript正则表达式 目的一:自我复习归纳总结 目的二:共享方便大家搜索 微信:wixf150 验证数字:^[0-9]*$ 验证n ...
- TextView使用大全
最近打算写一个系列的android初级开发教程,预计40篇以上的文章,结合我实际工作中的经验,写一些工作中经常用到的技术,让初学者可以少走弯路,写一个系列的话,大家学习起来也有头有尾. 今天就从我们每 ...
- [WinForm]WinForm跨线程UI操作常用控件类大全
前言 在C#开发的WinForm窗体程序开发的时候,经常会使用多线程处理一些比较耗时之类的操作.不过会有一个问题:就是涉及到跨线程操作UI元素. 相信才开始接触的人一定会遇上这个问题. 为了解决这个问 ...
- iOS中NSLog输出格式大全
iOS开发中的输出格式大全: %@ 对象 %d, %i 整数%u 无符整形%f ...
- 织梦dedecms漏洞修复大全(5.7起)
很多人说dedecms不好,因为用的人多了,找漏洞的人也多了,那么如果我们能修复的话,这些都不是问题. 好,我们来一个一个修复.修复方法都是下载目录下该文件,然后替换或添加部分代码,保存后上传覆盖(记 ...
随机推荐
- 与HttpSessionListener接口有关的方法是。
与HttpSessionListener接口有关的方法是. A.sessionInitialized() B.sessionCreated() C.sessionFinialized() D.sess ...
- Visual Studio 2010自动添加头部注释信息
在日常的开发中我们经常需要为我们的类库添加注释和版权等信息,这样我们就需要每次去拷贝粘贴同样的文字,为了减少这种重复性的工作,我们可以把这些信息保存在Visual Studio 2010类库模版文件里 ...
- 竞赛图的得分序列 （SRM 717 div 1 250）
SRM 717 DIV 1 中 出了这样一道题: 竞赛图就是把一个无向完全图的边定向后得到的有向图,得分序列就是每个点的出度构成的序列. 给出一个合法的竞赛图出度序列, 要求构造出原图(原题是求(u, ...
- IOS 分节表视图
分节表视图 简单的表视图仅仅有一个节,它实际上是分节表视图的一个特例.一个表能够有多个节,节也有头有脚,分节是加入索引和分组的前提. 索引的正确使用原则如所看到的: 1.索引标题不能与显示的标题全然一 ...
- 尼康D90多点对焦
11点对焦 上市时间 2008 类型 单反数码相机 对焦方式 单区域AF:在选择区域内只对焦于目标可以从11个AF点传感器中的任意一个中选择 动态区域AF:对焦于选择区域的目标上,如果目标离开原来位置 ...
- hdu 4568(SPFA预处理+TSP)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4568 思路:先用spfa预处理出宝藏与宝藏之间的最短距离,宝藏到边界的最短距离,然后就是经典的求TSP ...
- 阿里面试经历JAVA总结
为记录阿里的电面经历,特与大家分享,岗位是JAVA研发工程师. 一面主要问题如下: 1)首先自我介绍 2)数据结构算法的基本问题,如排序算法,二叉树遍历,后序遍历非递归,图的最短路径问题 3)对一个数 ...
- git和svn的详细对比
近期就[版本管理工具是否进行切换SVN->Git]的问题进行了讨论,于是对svn和Git进行了相关研究,进而梳理出Git的特点(优.缺点),最后将Git与SVN进行了对比,对比结果详见下方内容. ...
- 【BZOJ4513】[Sdoi2016]储能表 数位DP
[BZOJ4513][Sdoi2016]储能表 Description 有一个 n 行 m 列的表格,行从 0 到 n−1 编号,列从 0 到 m−1 编号.每个格子都储存着能量.最初,第 i 行第 ...
- 超哥带你学网络编程部分blog
https://www.cnblogs.com/clschao/articles/9593164.html 网络编程 https://www.cnblogs.com/clschao/articles ...