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. [log]利用logrotate对Linux log进行管理

    转自:http://feikiss.iteye.com/blog/1402181 https://linux.cn/article-4126-1.html Syslog-ng服务是Linux系统中重要 ...

  2. JDBC 查询的三大参数 setFetchSize prepareStatement(String sql, int resultSetType, int resultSetConcur)

    JDBC 查询的三大参数 本文转载至 http://blog.csdn.net/turkeyzhou/article/details/5115228 DBC1.0 .JDBC2.0 .JDBC3.0  ...

  3. HTML——如何在html中插入视频

    1,插入优酷视频: 在优酷分享界面有个html代码,直接复制放入body中,定义div的align居中即可 2.插入本地视频:用video属性  用mp4格式 <video>标签的属性 s ...

  4. [JavaScript]JS调用PHP和PHP调用JS的方法举例

    http://blog.csdn.net/pleasecallmewhy/article/details/8592571 body { background: #C7EDCC !important; ...

  5. kill -HUP pid 更改配置后不重新启动服务,动态更新配置文件

    kill -HUP pid kill -HUP pid  pid 是进程标识.如果想要更改配置而不需停止并重新启动服务,请使用该命令.在对配置文件作必要的更改后,发出该命令以动态更新服务配置. 根据约 ...

  6. 关于ARM中的tst、cmp、bne、beq指令

    一.关于cmp的详细用法 假设现在AX寄存器中的数是0002H,BX寄存器中的数是0003H. 执行的指令是:CMP AX, BX 执行这条指令时,先做用AX中的数减去BX中的数的减法运算. 列出二进 ...

  7. Deep Reinforcement Learning from Self-Play in Imperfect-Information Games

    Heinrich, Johannes, and David Silver. "Deep reinforcement learning from self-play in imperfect- ...

  8. qt 窗口控件自动调整大小

    /******************************************************************** * qt 窗口控件自动调整大小 * * 在写gui的时候,希 ...

  9. 建议 for 语句的循环控制变量的取值采用“半开半闭区间”写法

    建议 for 语句的循环控制变量的取值采用“半开半闭区间”写法. #include <iostream> /* run this program using the console pau ...

  10. Windows 环境搭建Redis集群

    环境以及引用资料 1.windows server 2008 r2 enterprise  (木有办法,公司的服务器全是如此,就这种环境搭建吧) 2.redis官方资料下载: https://redi ...