1. 1.代码较为简单，不作太多讲解，新建一个javascript工程，在index.htl中编写如下代码，根据<link>和<script>标签配制好js和css库便可！
  2.  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8"/>
  5.     <meta lang="zh"/>
  6.     <title>select2</title>
  7.     <script src="js/jquery-3.3.1.js"></script>
  8.     <link href="css/select2.css" rel="stylesheet" />
  9.     <link rel="stylesheet" href="css/bootstrap.css">
  10.     <link rel="stylesheet" href="css/bootstrap-table.css">
  11.     <script src="js/bootstrap.min.js"></script>
  12.     <script src="js/bootstrap-table.js"></script>
  13.     <script src="js/select2.js"></script>
  15.     <script type="text/javascript">
  16.     </script>
  17. </head>
  18. <body>
  20. <div>
  21.     <table id = "demo">
  22.     </table>
  23. </div>
  25. <button οnclick="unall()">禁用全部</button>
  26. <button οnclick="onall()">启用全部</button>
  27. <button οnclick="msg()" id = "btn">select2触发</button>
  28. <button οnclick="adddata()">增加数据</button>
  29. <button οnclick="adddata_temp()">判断增加数据</button>
  30. <button οnclick="setdata()">设置值</button>
  31. <!--给select2设置值-->
  32. <button οnclick="setnull()">设置空</button>
  33. <button οnclick="getvalue()">得到值(data方法)</button>
  34. <button οnclick="getvalue_()">得到值(jquery选择器)</button>
  35. <button οnclick="jud_init()">判断是否初始化</button>
  36. <button οnclick="kill()">销毁select2</button>
  37. <button οnclick="help()">启用select2</button>
  38. <button οnclick="on_()">绑定select事件</button>
  39. <button οnclick="off_()">解除绑定select事件</button>
  40. <button οnclick="trigger()">触发事件</button>
  42. <select class="test" multiple="multiple" style="width:300px">
  43.     <optgroup label="阿拉伯数字">
  44.         <option>1</option>
  45.         <option disabled="disabled">2(禁用)</option>
  46.         <option>3</option>
  47.     </optgroup>
  48.     <optgroup label="汉字">
  49.         <option selected="selected">一</option> //默认选中
  50.         <option disabled="disabled">二(禁用)</option>
  51.         <option>三</option>
  52.     </optgroup>
  53. </select>
  55. <script type="text/javascript">
  57.     function formatState (state) {
  58.         if (!state.id) {
  59.             return state.text;
  60.         }
  61.         var $state = $(
  62.             '<span><img src="' + 'images/1.png" class="img-flag" /> ' + state.text + '</span>'
  63.         );
  64.         return $state;
  65.     };
  67.     function msg(){
  68.         alert('select2点击触发');
  69.     }
  71.     function adddata(){
  73.         var data = {
  74.             id: 6,
  75.             text: '四'
  76.         };
  78.         var newOption = new Option(data.text,data.id,false,false);
  79.         $('.test').append(newOption).trigger('change');
  80.     }
  82.     function adddata_temp(){
  84.         var data = {
  85.             id: 6,
  86.             text: '五'
  87.         };
  89.         if ($('.test').find("option[value='" + data.id + "']").length) {
  91.             $('.test').val(data.id).trigger('change');
  93.         } else {
  94.             var newOption = new Option(data.text, data.id,true,true);
  95.             $('.test').append(newOption).trigger('change');
  96.         }
  97.     }
  99.     function setdata(){
  101.         $('.test').val(['1','三']);
  102.         $('.test').trigger('change');
  103.     }
  105.     function setnull(){
  107.         $('.test').val(null).trigger('change');
  108.     }
  110.     function getvalue(){
  112.         var info = $(".test").select2('data');
  114.         alert('数据类型:' + typeof info);
  115.         alert("数据值:" + JSON.stringify(info));
  116.     }
  118.     function getvalue_(){
  120.         var info = $('.test').find(':selected').data('own');                            //调用自定义 'own' 属性
  121.         alert(JSON.stringify(info));
  122.     }
  124.     function jud_init(){
  126.         if ($('.test').hasClass("select2-hidden-accessible")) {
  127.             alert('已初始化');
  128.         }else{
  129.             alert('未初始化');
  130.         }
  131.     }
  133.     function kill(){
  135.         $('.test').select2('destroy');
  136.     }
  138.     function help(){
  140.         $('.test').select2();
  141.     }
  143.     function on_(){
  145.         $('.test').on('select2:select',function (e) {
  146.             alert(JSON.stringify(e.params.data));
  147.         })
  148.     }
  150.     function off_(){
  152.         $('.test').off('select2:select');
  153.         alert('off select');
  154.     }
  156.     function trigger() { //该函数的执行会触发select2:select事件的执行，即一点trigger按扭会触发select2:select（在本文是on_()函数的执行）
  158.         var data = {
  159.             "id": 10,
  160.             "text": "胡海",
  161.             "nick": "蓝月"
  162.         };
  164.         $('.test').trigger({
  165.             type: 'select2:select',
  166.             params: {
  167.                 data: data
  168.             }
  169.         });
  171.     }
  173.     $(document).ready(function () {
  175.         $('.test').select2({
  176.             templateResult:formatState, //下拉列表的格式
  177.             //templateSelection: formatState, //选择后的格式
  178.             dropdownParent:$('#btn'),
  179.             tags: true, //允许自定义值（在框内输入自定义值后回车）
  180.             allowClear: true, //都允许删除
  181.             maximumSelectionLength:2, //最大允许选择两个
  182.             tokenSeparators:[','], //自定义值时，输入','则完成自定义
  184.             createTag: function (params) { //必须包括'@'元素才能完成自定义值
  185.                 if (params.term.indexOf('@') === -1) {
  186.                     return null;
  187.                 }
  189.                 return {
  190.                     id: params.term,
  191.                     text: params.term
  192.                 }
  193.             },
  195.             insertTag: function (data, tag) {
  196.                 data.push(tag);
  197.             }
  199.             ,templateSelection: function (data,container) {                                     //创建自定义 'own' 属性，值为 'this is my data'
  200.                 $(data.element).attr('data-own','this is my data');
  201.                 return data.text + typeof container;
  202.             }
  204.         });
  205.     })
  207.     $('#demo').bootstrapTable({
  208.         columns: [{
  209.             field: 'id',
  210.             title: 'ID'
  211.         }, {
  212.             field: 'name',
  213.             title: '商品'
  214.         }, {
  215.             field: 'price',
  216.             title: '价格'
  217.         }, {
  218.             field: 'country',
  219.             title: '国家',
  221.             formatter:function (value,row,index) {
  223.                 return'<select class="from" name="states[]" multiple="multiple" οnchange="change_value(this.options[this.options.selectedIndex].value)" style="width: 200px">\n' + '</select>';
  224.             }
  225.         }],
  227.         onLoadSuccess: function () { //加载成功时执行a
  229.             console.info("加载成功");
  230.         },
  231.         onLoadError: function () { //加载失败时执行
  233.             console.info("加载数据失败");
  234.         },
  236.         data: [{
  237.             id: 1,
  238.             name: '电脑',
  239.             price: '$1000',
  240.             country:'中国'
  241.         }, {
  242.             id: 2,
  243.             name: '冰箱',
  244.             price: '$500',
  245.             country:'美国'
  246.         }, {
  247.             id: 3,
  248.             name: 'country',
  249.             price:'$10000',
  250.             country: '意大利'
  251.         }]
  253.     });
  255.     function init() {
  257.         var countrys = [
  259.             '中国',
  260.             '美国',
  261.             '意大利'
  262.         ];
  264.         $('.from').select2({
  266.             data:countrys
  267.         });
  269.     }
  271.     function unall(){
  272.         $('.from').prop('disabled',true);
  273.     }
  275.     function onall(){
  276.         $('.from').prop('disabled',false);
  277.     }
  279.     function change_value(value){
  280.         alert('change:' + value);
  281.     }
  283.     $(document).ready(function () {
  284.         init();
  285.     })
  287.     $('.from').on('select2:open',function () {
  288.         alert('on open');
  289.     })
  291.     $('.from').on('select2:select',function () {
  292.         alert('on select');
  293.     })
  295.     $('.from').on('select2:close',function () {
  296.         alert('on close');
  297.     })
  299.     $('.from').change(function () {
  300.         alert('change');
  301.     })
  303.     $('.from').on('select2:unselect',function () {
  304.         alert('on unselect');
  305.     })
  307.     $('.from').on('select2:opening',function () {
  308.         alert('on opening');
  309.     })
  311.     $('.from').on('select2:selecting',function () {
  312.         alert('on selecting');
  313.     })
  315.     $('.from').on('select2:unselecting',function () {
  316.         alert('on unselecting');
  317.     })
  319.     $('.from').on('select2:closing',function () {
  320.         alert('on closing');
  321.     })
  323. </script>
  324. </body>
  325. </html>

注意：

1.想要正确运行本项目，需要在项目根目录创建images目录，并放置一张 '1.png' 的图片

运行结果：

javascript 入门 之select2功能大全的更多相关文章

  1. javascript 入门 之select2获取远程数据

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta lan ...

  2. javascript 入门 之select2选择本地数据

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta lan ...

  3. JavaScript入门篇 编程练习

    编程挑战 一.定义"改变颜色"的函数 提示: obj.style.color obj.style.backgroundColor 二.定义"改变宽高"的函数 提 ...

  4. JavaScript入门

    本篇内容是学习慕课网相关课程后,总结出可能未来会忘记的内容 (一)JavaScript入门操作 1.js代码插入位置,以及执行顺序 <head> <script type=" ...

  5. 慕课网JavaScript入门篇课程笔记

    1.js注释很重要 单行注释,在注释内容前加符号 “//”. <script type="text/javascript"> document.write(" ...

  6. JavaScript入门基础

    JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...

  7. Swift入门教程:基本语法大全

    原文:Swift入门教程:基本语法大全       简介:                                                                        ...

  8. JavaScript入门篇

    记录一下在慕课网学习JavaScript的过程. 以下内容均来自慕课网. 传送:https://www.imooc.com/code/401 为什么学习JavaScript 1. 所有主流浏览器都支持 ...

  9. JavaScript入门--慕课网学习笔记

     JAVASCRIPT—(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script&g ...

随机推荐

  1. BAPC K题 Keep Him Inside

    Problem Statement: As a result of a long-standing war between the Sorcerers and the Orcs, you have b ...

  2. nuxt创建项目的步骤

    nuxt创建项目的步骤 1.基本步骤 // 创建package.json依赖管理文件 npm init -y // 在package.json文件中添加运行nuxt的命令,之后npm run dev启 ...

  3. Web_jQuery

    第1章: jQuery简介 为了简化 JavaScript 的开发,一些 JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数,简化HTML与JavaScript之 ...

  4. udp和tcp特点 实现文件上传

    本周课程安排: 网络编程结束 并发网络开头 进程 线程 IO模型 上周内容回顾: 1.osi七层:应用层,表示层,会话层,传输层,网络层,数据链路层,物理连接层 也有人把他们归纳为五层: 应用层, 传 ...

  5. VirtualBox 安装 Centos8 使用 Xshell 连接

    1.下载CentOS CentOS下载地址:https://wiki.centos.org/Download 这里选择本地安装包,网络安装包在安装时需要在线下载资源比较慢 2.安装VirtualBox ...

  6. upload-labs学习笔记

    项目地址:https://github.com/c0ny1/upload-labs   运行环境 操作系统:windows.Linux php版本:推荐5.2.17(其他版本可能会导致部分Pass无法 ...

  7. 【多校】2019 Multi-University Training Contest 1官方题解

    Blank 定义dp[i][j][k][t]dp[i][j][k][t]dp[i][j][k][t]代表填完前ttt个位置后,{0,1,2,3}\{0,1,2,3\}{0,1,2,3}这4个数字最后一 ...

  8. 【codeforces】Codeforces Round #606 E. Two Fairs——图论

    题目链接 题意 给你一张无向图,求出有多少对点对(x, y)满足从点x到点y的所有路径必同时经过点a和点b 分析 单点 首先考虑假如点a和点b是同一个点的情况 我从任意的一点出发,把所有与点a/b相连 ...

  9. Spring Cloud 系列之 Netflix Zuul 服务网关

    什么是 Zuul Zuul 是从设备和网站到应用程序后端的所有请求的前门.作为边缘服务应用程序,Zuul 旨在实现动态路由,监视,弹性和安全性.Zuul 包含了对请求的路由和过滤两个最主要的功能. Z ...

  10. 【SQL SERVER重新认识】数据内部存储结构简单探索

    数据库经常需要打交道,但是从来没想过数据库内部是如何存储数据. 今天探索一下数据库内部如何存储数据,从下面几个方面探索 数据库内部如何存储数据 索引数据如何存储 操作数据对存储影响 总结 数据库内部如 ...