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. vhost in nodejs

    关于vhost 个人理解为vhost是一种可以在一个ip下同时部署多个不同域名站点的的概念. 其好处就是对一些小型的网站不必每个网站都占用一个ip,或者说一个服务,举个例子,vhost的概念就相当于打 ...

  2. 【Mac + Appium + Python3.6学习(五)】之常用的Android自动化测试API总结

    Github测试样例地址:https://github.com/appium-boneyard/sample-code/tree/master/sample-code/examples ①定位text ...

  3. 圆角带箭头的提示框css实现

    css是一个很强大的东西,很多网页效果,我们可以通过css直接实现.今天给大家分享的是一个用css实现的圆角带箭头的提示框. 效果如下图: 这一个样式主要涉及到了css的边框样式border的运用和定 ...

  4. 第一百六十二节，jQuery入门介绍

    jQuery入门 学习要点: 1.什么是  jQuery 2.学习 jQuery的条件 3.jQuery的版本 4.jQuery的功能和优势 5.其他 JavaScript库 6.是否兼容低版本  I ...

  5. Jafka Broker代码阅读之总览

    从本文开始,笔者将尝试从源码角度解读Jafka(Kafka)的特性,探究其背后的实现原理与技术.前面讲解Jafka Broker的文章中有提到下面这段启动服务端的代码,我们就从这里开始. Proper ...

  6. Python_selenium之处理Alert窗

    Python_selenium之处理Alert窗 一.介绍 1. 介绍如何通过switch_to方法处理网页Alert窗口 2. 然后我们自己创建一个alert弹窗进行操作 二.测试脚本 1. 测试脚 ...

  7. linux配置sftp用户的chroot步骤(用户的sftp根文件夹)

    1.编辑ssh中的sftp的配置,命令可能是:vi /etc/ssh/sshd_config 在这个文件里最后增加 #限制sftp组的用户使用sftp时在自己的home文件夹下 Match Group ...

  8. win 8升级win8.1的几个问题

        对于习惯了win7来说的小朋友,win8的使用简直有种想砸电脑的冲动啊,特别是玩游戏的小朋友,win8各种bug.对于游戏.咳咳,我只是多说了,我们都是爱学习的好孩子,少玩游戏,少撸.简单说一 ...

  9. XAMPP修改mysql的默认密码的三种方法

     How I can set a "root" password in MySQL? (method 1) In the \xampp\mysql\bin directory en ...

  10. 在TextView中设置DrawableLeft不显示的问题

    1.在XML中使用 android:drawableLeft="@drawable/icon" 2.代码中动态变化 Drawable drawable= getResources( ...