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. PHP简单工厂模式、工厂方法模式和抽象工厂模式

    PHP工厂模式概念:工厂模式是一种类,它具有为您创建对象的某些方法.您可以使用工厂类创建对象,而不直接使用 new.这样,如果您想要更改所创建的对象类型,只需更改该工厂即可.使用该工厂的所有代码会自动 ...

  2. 【转】Visual Studio常用快捷键

    Shift+Alt+Enter: 切换全屏编辑   Ctrl+B,T / Ctrl+K,K: 切换书签开关 Ctrl+B,N / Ctrl+K,N: 移动到下一书签 Ctrl+B,P: 移动到上一书签 ...

  3. Spring事件监听Demo

    Spring事件监听实现了观察者模式.本Demo在junit4测试环境中实现 主要有三个类事件类.监听器类.事件发布类(入口) 事件类必须继承 ApplicationEvent,代码如下: impor ...

  4. EMC现场测试-EFT、ESD、Surge和场辐射

    EMC测试主要进行了4项: 1. ESD 采用静电枪测试,接触电压±6KV,检测了整个箱体和内部可见金属部分: 空气放电正负8KV,检测了箱体及内部金属部分(如板卡壳体),特别检测了220V电源插头及 ...

  5. 关于一致性Hash算法

    在大型web应用中,缓存可算是当今的一个标准开发配置了.在大规模的缓存应用中,应运而生了分布式缓存系统.分布式缓存系统的基本原理,大家也有所耳闻.key-value如何均匀的分散到集群中?说到此,最常 ...

  6. 在Linux环境下mysql的root密码忘记解决方法

    MySQL密码的恢复方法之一 ．首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的 状态下 ...

  7. r语言 技巧总结

    1.table函数返回众数,再转为dataframe as.data.frame(table(x)) 2.使用which 返回数组下标 which(rs.list=="rs1008507&q ...

  8. 机器学习理论之SVM

    支持向量机系列 (1) 算法理论理解 http://blog.pluskid.org/?page_id=683 手把手教你实现SVM算法(一) (2) 算法应用 算法应用----python 实现实例 ...

  9. 修改MySQL的默认密码的四种小方法

    投稿:lijiao 字体:[增加 减小] 类型:转载 时间:2015-09-05我要评论 对于windows平台来说安装完MySQL后,系统就已经默认生成了许可表和账户,下文中就教给大家如何修改MyS ...

  10. LINUX下CPU Load Average的一点研究

    背景: 公司的某个系统工作在基于Linux的Cent OS下,一个host下同时连接了许多client, 最近某台Host总是显示CPU Load Average过高,我们单纯的以为是CPU的占用过高 ...