要说这select2,还真是我......，也不是难，反正就对不了！！！

我博客看了一下牛，愣是对不了，后来硬着头看着官方文档，终于出来了.

注意：

1.调用的jquery库一定要能用，网上很多不能用

2.一定要在

$(document).ready(function() {

    $('？？？').select2();

});

里面运行

3.官方文档虽然是老外写的，但，还得看！！！

英文不好不是写代码难，而是看优秀的代码难.谁让中国的IT落后呢！！！

select2 入门代码：

方法1(调用CDN的select2）：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8"/>

    <meta lang="zh"/>

    <title>select2</title>

    <script src="js/jquery-3.3.1.js"></script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $('.demo').select2();

        });

    </script>

</head>

<body>

<div style="margin-top:20px;">

    <select class="demo" name="states[]" multiple="multiple" style="width: 500px">

        <option value="111">111</option>

        <option value="222">222</option>

        <option value="333">333</option>

    </select>

</div>

</body>

</html>

2方法二（用bower安装）

1.要用bower安装，你首先需要安装如下文件：

  • Node：安装node.js .
  • NPM：NPM是node程序包管理器。它是捆绑在node.js的安装程序上的，所以一旦你已经安装了node，NPM也就安装好了。
  • Git：你需要从git仓库获取一些代码包。

2.安装bower:

npm install -g bower

3.安装jquery,select2

bower install jquery

bower install select2

4.配制script,css

bower安装的资源一般在 bower_components/ 目录下

5.代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8"/>

    <meta lang="zh"/>

    <title>select2</title>

    <script src="js/jquery-3.3.1.js"></script>

    <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />-->

    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>-->

    <link href="bower_components/select2/dist/css/select2.css" rel="stylesheet" />

    <script src="bower_components/select2/dist/js/select2.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $('.demo').select2();

        });

    </script>

</head>

<body>

<div style="margin-top:20px;">

    <select class="demo" name="states[]" multiple="multiple" style="width: 500px">

        <option value="111">111</option>

        <option value="222">222</option>

        <option value="333">333</option>

    </select>

</div>

</body>

</html>

3.

（1).手动配制：

到

https://github.com/select2/select2/tags

下载select2

并把dist目录下的文件放在你的项目目录下，配制好路径

（2）.源码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8"/>

    <meta lang="zh"/>

    <title>select2</title>

    <script src="js/jquery-3.3.1.js"></script>

    <link href="css/select2.css" rel="stylesheet" />

    <script src="js/select2.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $('.demo').select2();

        });

    </script>

</head>

<body>

<div style="margin-top:20px;">

    <select class="demo" name="states[]" multiple="multiple" style="width: 500px">

        <option value="111">111</option>

        <option value="222">222</option>

        <option value="333">333</option>

    </select>

</div>

</body>

</html>

javascript 入门 select2的更多相关文章

  1. JavaScript入门篇 编程练习

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

  2. JavaScript入门

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

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

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

  4. JavaScript入门基础

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

  5. JavaScript入门介绍(二)

    JavaScript入门介绍 [函数] 函数function 是Javascript的基础模块单元,用于代码的复用.信息影藏和组合调用. function a(){} 函数对象Function Lit ...

  6. JavaScript入门介绍(一)

    JavaScript入门介绍 [经常使用的调试工具][w3school.com.cn在线编辑] [Chrome浏览器 开发调试工具]按F121.代码后台输出调试:console.log("t ...

  7. 开心菜鸟系列－－－－函数作用域（javascript入门篇）

      1 <!DOCTYPE html>   2 <html>   3 <script src="./jquery-1.7.2.js"></ ...

  8. 开心菜鸟系列－－－－变量的解读（javascript入门篇）

                       console.info(         console.info(window['weiwu'])          console.info(window. ...

  9. javascript入门视频第一天 小案例制作 零基础开始学习javascript

    JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此 ...

随机推荐

  1. C 和 C++语言中的内存拷贝函数memcpy()

    memcpy指的是C和C++使用的内存拷贝函数 函数原型为void *memcpy(void *destin, void *source, unsigned n): 函数的功能是从源内存地址的起始位置 ...

  2. Apex_2. LiveBos两个时间求相差天数、历时

    (1)获取两个时间相差天数(没有上午下午区分) var d1=ABS_DATESTRING(FStartTime,'yyyy/MM/dd'); var d2=ABS_DATESTRING(FEndTi ...

  3. Integration of Metabolomics and Transcriptomics To Reveal Metabolic Characteristics and Key Targets Associated with Cisplatin Resistance in Nonsmall Cell Lung Cancer（解读人：林山云）

    期刊名:J. Proteome Res 发表时间:(2019年8月) IF:3.78 单位: 上海第九人民医院药学系,上海交通大学药学院 上海交通大学药物与生物化学系   物种:人源A549细胞系 技 ...

  4. MySQL数据备份与恢复(二) -- xtrabackup工具

    上一篇介绍了逻辑备份工具mysqldump,本文将通过应用更为普遍的物理备份工具xtrabackup来演示数据备份及恢复的第二篇内容. 1.  xtrabackup 工具的安装 1.1  安装依赖包 ...

  5. 如何在win10下使用Ubuntu中的crontab自动执行任务

    win10下如何下载ubuntu 1.打开Microsoft Store,搜索ubuntu,选择其一(我选了第一个),点击获取,耐心等待安装即可:   2.安装完成可在开始栏找到:   使用cront ...

  6. shell编程之字符串处理

    # .#号截取,删除左边字符,保留右边字符,*// 表示从左边开始删除第一个 // 号及左边的所有字符 echo ${var#*//} # . ## 号截取,删除左边字符,保留右边字符,##*/ 表示 ...

  7. mysql字段数据类型、设置严格模式

    表操作 今日内容 1.数据类型 建表的时候,字段都有对应的数据类型 整型 浮点型 字符类型(char与varchar) 日期类型 枚举与集合 2.约束条件 primary key unique key ...

  8. MySQL----DDL(操作数据库,表)

    1. 操作数据库:CRUD 1. C(Create):创建 * 创建数据库: * create database 数据库名称; * 创建数据库,判断不存在,再创建: * create database ...

  9. 洛谷 P3870 [TJOI2009]开关 题解

    原题链接 前置知识: 线段树的单点.区间的修改与查询. 一看,我们需要维护两个操作: 区间取反: 区间求和. (因为区间 \(1\) 的个数,就是区间的和) 典型的 线段树 . 如果你只会线段树的 区 ...

  10. 从sslyze看TLS证书的点点滴滴

    纵观眼下,https已经深入大街小巷,成为网络生活中不可或缺的一部分了.提到了https,我们又不得不想到TLS(SSL),而提到了TLS,我们又不得不提到一个让人捉摸不透的东西:TLS证书. 关于证 ...