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. Win2008 Server系统安装打印服务器与配置

    原文:http://60808.org/thread-20259-1-1.html 视频地址:http://edu.51cto.com/lesson/id-20163.html 本文介绍的是在Win2 ...

  2. (转) eclipse安装lombok

    lombok的官方网址:http://projectlombok.org/ 1. lombok的安装: 使用lombox是需要安装的,如果不安装,IDE则无法解析lombox注解,有两种方式可以安装l ...

  3. 将hive的hql执行结果保存到变量中

    这里分别针对shell脚本和python脚本举例: shell脚本如下: 注意:在hive语句左右两边使用的是ESC键下面的点号,不是单引号. #!/usr/bin/env bash test1=`h ...

  4. iOS边练边学--简单的数据操作(增、删、改)，左滑动删除和弹窗

    一.数据刷新的原则: 通过修改模型数据,来修改tableView的展示 先修改数据模型 在调用数据刷新方法 不要直接修改cell上面子控件的属性 二.增删改用到的方法: <1>重新绑定屏幕 ...

  5. WCF客户端获取服务器返回数据报错

    错误信息:An error occurred while receiving the HTTP response to http://127.0.0.1/SIHIS/Infection/PubExec ...

  6. Spring 中三种Bean配置方式比较

    今天被问到Spring中Bean的配置方式,很尴尬,只想到了基于XML的配置方式,其他的一时想不起来了,看来Spring的内容还没有完全梳理清楚,见到一篇不错的文章,就先转过来了. 以前Java框架基 ...

  7. Step download timeout (120 sec)

    Step download timeout (120 sec)  --------- Troubleshooting-----------------------------------    修改S ...

  8. Hbase建模

    转自:http://blog.itpub.net/28912557/viewspace-1119865/ 什么情况下使用Hbase?1,成熟的数据分析主题,查询模式已经确定并且不易轻易改变.(主要还是 ...

  9. 终于想明白一些事，关于NAS

    一直以来想搞好一部NAS存储小孩的视频和照片,一直纠结用什么硬件,硬件解决后虽然不甚满意,不过无论怎么样都算投入巨资(超过7千……)组装完毕,然后就一直纠结用什么NAS系统,终于下定决心使用了OMV, ...

  10. 无法从“重载函数类型”为“const std::_Tree<_Traits> &”推导 <未知> 参数

    场景: 原因: 用到string类型,但是没有包含头文件. 解决方法: #include<string>