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使用大全的更多相关文章

  1. Oracle 数据库语句大全

    Oracle数据库语句大全 ORACLE支持五种类型的完整性约束 NOT NULL (非空)--防止NULL值进入指定的列,在单列基础上定义,默认情况下,ORACLE允许在任何列中有NULL值. CH ...

  2. 开源 iOS 项目分类索引大全 － 待整理

    开源 iOS 项目分类索引大全 GitHub 上大概600个开源 iOS 项目的分类和介绍,对于你挑选和使用开源项目应该有帮助 系统基础库 Category/Util sstoolkit 一套Cate ...

  3. .NET Core dotnet 命令大全

    dotnet 命令大全,让你理解dotnet 命令. 本文将以一个实例串起 dotnet 所有命令,让你玩转dotnet 命令. 本篇文章编写环境为windows 10 ,dotnet 命令同样适用于 ...

  4. Python 资源大全中文版

    Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-python 是 vinta 发起维护的 Python 资源列 ...

  5. 【JS】javascript 正则表达式 大全 总结

    javascript 正则表达式 大全 总结 参考整理了一些javascript正则表达式 目的一:自我复习归纳总结 目的二:共享方便大家搜索 微信:wixf150 验证数字:^[0-9]*$ 验证n ...

  6. TextView使用大全

    最近打算写一个系列的android初级开发教程,预计40篇以上的文章,结合我实际工作中的经验,写一些工作中经常用到的技术,让初学者可以少走弯路,写一个系列的话,大家学习起来也有头有尾. 今天就从我们每 ...

  7. [WinForm]WinForm跨线程UI操作常用控件类大全

    前言 在C#开发的WinForm窗体程序开发的时候,经常会使用多线程处理一些比较耗时之类的操作.不过会有一个问题:就是涉及到跨线程操作UI元素. 相信才开始接触的人一定会遇上这个问题. 为了解决这个问 ...

  8. iOS中NSLog输出格式大全

    iOS开发中的输出格式大全: %@                   对象 %d, %i               整数%u                    无符整形%f           ...

  9. 织梦dedecms漏洞修复大全(5.7起)

    很多人说dedecms不好,因为用的人多了,找漏洞的人也多了,那么如果我们能修复的话,这些都不是问题. 好,我们来一个一个修复.修复方法都是下载目录下该文件,然后替换或添加部分代码,保存后上传覆盖(记 ...

随机推荐

  1. JAVA图像缩放处理

    http://www.blogjava.net/kinkding/archive/2009/05/23/277552.html ———————————————————————————————————— ...

  2. C0304 备份最后一天所有修改的文件

    #! /bin/bash backupfile=backup-$(date +%m-%d-%Y) archive=${1:-$backupfile} # 上边内容, 参数替换 ${} echo $ar ...

  3. UTF8转换为GB编码gb2312转换为utf-8

    这个方法是用windows的字符集转换的,跟sybase 的unicode码表可能在某些符号上有差别,对于大部分字符来说,尤其是 汉字,应该不会有问题的,如果要求比较高的话,可以买sybase的 un ...

  4. [翻译]在ASP.NET Web API中通过OData支持查询和分页

    OData可以通过形如http://localhost/Products?$orderby=Name这样的QueryString传递查询条件.排序等.你可以在任何Web API Controller中 ...

  5. spark(1.1) mllib 源码分析(三)-朴素贝叶斯

    原创文章,转载请注明: 转载自http://www.cnblogs.com/tovin/p/4042467.html 本文主要以mllib 1.1版本为基础,分析朴素贝叶斯的基本原理与源码 一.基本原 ...

  6. HDU2059 龟兔赛跑 【DP】

    龟兔赛跑 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  7. PowerDesigner最基础的使用方法入门学习2

    from:http://www.cnblogs.com/huangcong/archive/2010/06/14/1757957.html 最近要忙期考,但还是决定每天抽点空来写CodeSmith的系 ...

  8. AVA 8 ：从永久区（PermGen）到元空间（Metaspace）

    你注意到了吗?JDK 8早期可访问版本已经提供下载了,java 开发人员可以使用java 8 提供的新的语言和运行特性来做一些实验.其中一个特性就是完全的移除永久代(Permanent Generat ...

  9. LNK2005 _DllMain@12 mfcs100d.lib

    起因是将之前使用 MFC 规则 DLL 的动态库都改为了 MFC 扩展 DLL,在将动态库中从 CWinApp 继承的类替换为 DllMain 函数后,就出现 LNK2005 错误,说 DllMain ...

  10. C++获取某个文件夹下的所有文件

    获取某个文件夹下的所有文件,返回各文件的路径加文件名 path为某文件夹的路径:eg. char * filePath = "C:\\Users\\WUQP\\Desktop\\test_d ...