1  引入js css 文件

<script src="js/jquery-1.11.1.min.js"></script>

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

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

2 html 代码：

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>演示</title>

    <script src="js/jquery-1.11.1.min.js"></script>

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

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

  </head>

  <body>

  <div style="text-align:center;">

  <h2>select2 - 带搜索的下拉框演示</h2>

  <br/>

    <select id='ss'>

      <option value="richerdyoung">richerdyoung</option>

    </select>

   </div>

    <script>

      //本地数据获取

      var data = [{ id: 'php', text: 'php' }, { id: 'python', text: 'python' }, { id: 'go', text: 'go' }];

      $("#ss").select2({

       data: data,

       placeholder:'请选择',

       allowClear:true

      })

    </script>

  </body>

</html>

效果如下：

演示地址：  https://www.richerdyoung.cn/select2/

git 地址： https://github.com/select2/select2/releases

【Select2】带搜索框的下拉框美化插件的更多相关文章

  1. Easyui-combobox-checkbox-带复选框的下拉框

    $.post("getSubInsuranceTypeList.do",{parent_id:node.id},function(result){                  ...

  2. Selenium 3----警告框处理+下拉框选择

    警告框处理 在WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/confi ...

  3. [ PyQt入门教程 ] PyQt5基本控件使用:单选按钮、复选框、下拉框

    本文主要介绍PyQt5界面最基本使用的单选按钮.复选框.下拉框三种控件的使用方法进行介绍. 1.RadioButton单选按钮/CheckBox复选框.需要知道如何判断单选按钮是否被选中. 2.Com ...

  4. Jquery学习笔记：操作form表单元素之一（文本框和下拉框）

    一.概述 在web页面开发中,经常需要获取和设置表单元素的值(如文本框中的内容),特别是在ajax应用中,更是常态.本文系统的介绍下如何操作. 同操作其它html元素一样,操作的过程差不多. 第一步, ...

  5. 通过jquery来实现文本框和下拉框动态添加效果，能根据自己的需求来自定义最多允许添加数量，实用的jquery动态添加文本框特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. vue.js实现单选框、复选框和下拉框

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框   在传统的HTM ...

  8. html基本标签表单实现交互原理，单选框，复选框，下拉框介绍

    表单是什么?表单是前端和服务器做交互的一种机制,表单收集用户输入信息,之后发送或者提交给服务器.用户在输入的信息称之为内容,内容的文本分为普通和密码型,用户通过单选框.复选框.下拉框(也就是下拉菜单) ...

  9. bootstrap3中select2的默认值和下拉框的禁用

    最近做项目用到了select2插件,需求中需要给下拉框设置默认值之后,禁用下拉框,我开始的写法是这样的 <script type="text/javascript"> ...

随机推荐

  1. 【分区助手】如何扩大C盘容量？

    问题:C盘容量太小,想通过缩小其他盘(比如本例的F盘)来扩大C盘. 工具:分区助手 步骤: 1.下好分区助手后打开(该软件建议装在C盘),选择左侧的[扩大分区导向]. 2.选择下面那个,要先缩小F盘扩 ...

  2. Winform RsaProtectedConfigurationProvider 加密数据库连接字符串

    private static string _strProvider = "RsaProtectedConfigurationProvider"; /// <summary& ...

  3. Tomcat负载均衡和集群环境的搭建

    实现此集群的方法参考了网上的很多文章,但由于很多文章都表明是原创的,故无法知道整个操作流程的真正作者是谁.下面就是我用我们真实的项目去实现这个过程.同时修复这过程中一些问题.以下的所有步骤均为亲自测试 ...

  4. R工具包

    直到12月初在微软技术大会,看到我软的工程师演示R的使用,我就震惊了,然后最近在网上到处了解和爬一些R的资料,看着看着就入迷了,这就是个大宝库了,以前怎么没发现,看来还是太狭隘了.直到前几天我看到这个 ...

  5. ASP.NET实现类似Excel的数据透视表

    代码: /Files/zhuqil/Pivot.zip 数据透视表提供的数据三维视图效果,在Microsoft Excel能创建数据透视表,但是,它并不会总是很方便使用Excel.您可能希望在Web应 ...

  6. 关于Unity中UI中的Button节点以及它的Button组件

    Button是最常用的UI节点,包含的组件有 1.Image组件 显示Button的纹理,把Image贴图拖进Image组件中后,记得点击Set Native Size,显示贴图原始大小 2.Butt ...

  7. 关于Cocos2d-x中GameController的定义

    GameController类是继承自Scheduler(有计时功能)或者Ref(可自动释放)的用户自己定义的一个控制器 如果一个场景有多个层的话,要用GameController,一个GameCon ...

  8. 关于Cocos2d-x随机数的生成

    1.使用前必须下一个随机种子,可以让每一次生成的随机数是不一样的,这里的每一次指的是时间上的每一次,如果是同一时间的随机数就不能这样写了 srand((unsigned)time(NULL));--- ...

  9. 奇怪的bug：javascript不执行

    背景:有人想要个简单的js效果,点击某个菜单,其他菜单收起. 说了下思路,结果~~ 只好直接写了一个,代码如下: <!DOCTYPE html> <html> <head ...

  10. perl File::Spec 模块

    File::Spec 模块提供了很多的功能,这里只列举几个常用的函数 rel2abs : 返回一个文件的绝对路径, 常见用法,返回当前运行的perl脚本的绝对路径 代码示例: my $prog = F ...