它的优点有：
样式还算好看，支持多选，支持索搜
下面来介绍下select2的用法

1.最简单的用法
只需要加载css和js即可使用

<select name="" id="test" style="width: 100px;">

        <option value="0">java</option>

        <option value="1">c</option>

        <option value="2">php</option>

        <option value="3">python</option>

        <option value="4">javascript</option>

    </select>

    <script type="text/javascript">

        $("#test").select2();

    </script>

再来张效果图

 
图片.png

注意：这个 放大镜（搜索图）需要放在和css,js同级

2.支持多选
加上一个 multiple='mutiple'的属性就好了

 <select name="" id="test" style="width: 200px;" name="states[]" multiple="multiple">

        <option value="0">java</option>

        <option value="1">c</option>

        <option value="2">php</option>

        <option value="3">python</option>

        <option value="4">javascript</option>

    </select>
 
图片.png

3.国际化（多语言）
默认是英文的提示
我们需要引入中文js
然后

 $("#test").select2({

            language: "zh-CN"

        });

完整代码

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>select</title>

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

    <script type="text/javascript" src="jquery-1.11.3.js"></script>

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

    <script type="text/javascript" src="select2/select2_locale_zh-CN.js"></script>

</head>

<body>

    <select name="" id="test" style="width: 200px;" name="states[]" multiple="multiple">

        <option value="0">java</option>

        <option value="1">c</option>

        <option value="2">php</option>

        <option value="3">python</option>

        <option value="4">javascript</option>

    </select>

    <script type="text/javascript">

        $("#test").select2({

            language: "zh-CN"

        });

    </script>

</body>

</html>
 
图片.png

3.默认赋值

 $("#test").val([1,2,3]).trigger('change');

　　

这样给select赋值，支持多项

链接：https://www.jianshu.com/p/60831ea22a1b

下拉框插件select2的使用的更多相关文章

  1. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...

  2. jQuery下拉框插件8种效果

    jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...

  3. Dropdown.js基于jQuery开发的轻量级下拉框插件

    Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...

  4. query多选下拉框插件 jquery-multiselect(修改)

    其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...

  5. 基于Bootstrap的下拉框插件bootstrap-select

    写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...

  6. jQuery无限级联下拉框插件

    自己编写jQuery插件 之 无限级联下拉框   因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉 ...

  7. select下拉框插件jquery.editable-select

    项目中有个需求,下拉框既可以下拉选择,也可以手动填写 html代码 <span>数据来源</span> </select> js代码 $('#noMean').ed ...

  8. 带搜索框的jQuery下拉框插件

    由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

  9. 浅解bootstrap 下拉框插件

    最近的业务需求是把后台数据渲染到前端,其中有一个是复选框数组,前端选择渲染的方式是bootstrap的下拉插件 渲染完成之后,此时会在原有select同级上面生成buton,dropdown-menu ...

随机推荐

  1. SecureCRT8.1+SecureCRT_keygen完成注册

    原文:https://www.cnblogs.com/qiyawei/p/7822957.html 1.下载完secureCRT8.1之后,进行安装. 点击secureCRT.exe的时候会出现如下图 ...

  2. 微信H5开发，页面被缓存，不更新

    原文:https://blog.csdn.net/qq_27471405/article/details/79295348  这里只是备份 前言:每一次请求,我们都知道浏览器会做一定处理,其中就包括对 ...

  3. ElasticSearch（四）：使用Java连接ElasticSearch集群

    public class ESIndexMapping { private static String host="192.168.56.3"; // 服务器地址 private ...

  4. 将逗号分隔的字符串转换为Python中的列表

    给定一个字符串: 它是由逗号分隔的几个值的序列: mStr = '192.168.1.1,192.168.1.2,192.168.1.3' 如何将字符串转换为列表? mStr = ['192.168. ...

  5. Python *args 和 **kwargs用法

    *args的参数形式把剩下的没有关键字的参数收起来形成一个tuple,*kwargs把有关键字的收起来做成一个字典 def this_fun(a,b,*args,**kwargs): print a ...

  6. SWIG 的应用(一)

    用 C/C++ 扩展 Python. - 如果仅使用标准 C 库函数,则可以使用 Python 自带的 ctypes 模块,或者使用 cffi. - 如果要使用自定义 C/C++ 函数,又不怕写 wr ...

  7. 破解windows版idea

    近期使用idea的时候提示已过试用期,需要购买,否则只能使用半小时 网上破解方法很全,记录一下 1.下载破解补丁 百度网盘:https://pan.baidu.com/s/15Wq9-c4SVwg_2 ...

  8. 一步一步写出java swing登录界面，以及输入的参数获取

    经过好几天的学习,研究,接下来说说java swing,以及内嵌浏览器的方法. 一.swing是一个用于java应用程序用户界面的的开发工具包. 例如:接下来我们做个登录界面,简要说明 做之前的构想图 ...

  9. Java 中常见的数据结构

    1.数据结构有什么作用? 当使用 Java 里面的容器类时,你有没有想过,怎么 ArrayList 就像一个无限扩充的数组,也好像链表之类的.很好使用,这就是数据结构的用处,只不过你在不知不觉中使用了 ...

  10. 【Atcoder hbpc C 183】1=0.999...

    Atcoder hbpc C 题意:给n个循环小数或者有限小数,问其中有多少个互不相同的. 思路:我的思路比较繁琐. 首先我们考虑分数化小数:假设原来的数是\(a.b(c)\),那么这个分数就是\(a ...