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语言 · 求圆面积表面积体积

    算法提高 3-3求圆面积表面积体积   时间限制:1.0s   内存限制:256.0MB      问题描述 接受用户输⼊的数值,输出以该值为半径的(1)圆面积,(2)球体表面积,(3)球体体积.pi ...

  2. MySQL死锁原因分析

    行级锁有三种模式: innodb 行级锁 record-level lock大致有三种:record lock, gap lock and Next-KeyLocks. record lock  锁住 ...

  3. m个苹果放在n个盘子里面有多少种放法？（动态规划）

    m个苹果放在n个盘子里面有多少种放法?(动态规划) 实现代码如下: #include <iostream> using namespace std; int s(int m ,int n) ...

  4. HTML文档的经常使用标记

    一.HTML文档中经常使用的标记有文字标记.段落标记.列表标记.超链接标记.图像标记.表格标记.框架标记和多媒体标记,以下对这些经常使用标记进行介绍: 1.文字标记:文字是网页重要的组成部分之中的一个 ...

  5. Ajax-ajax实例4-多级联动菜单

    项目结构: 项目运行: 技术要点: 1.4.1 技术要点在分析具体的实现代码之前,先介绍一下本例的几个技术要点.1 ．选项的动态创建与删除document 对象的 createElement 方法可以 ...

  6. python将数据写入mysql乱码的解决办法

    1.错误为:插入乱码 报错: Python模块MySQLdb操作mysql出现2019错误:Can't initialize character set utf-8 解决: 写入数据语句为: cnn ...

  7. 25+开源的在线购物软件(PHP, JavaScript 和 ASP.Net)

    25 +免费开源的电子商务解决方案,提供了建立一个在线购物所有主要功能,并能够连接到一个支付处理系统1. Magento Magento是一套专业开源的PHP电子商务系统.Magento设计得非常灵活 ...

  8. YARN : Architecture of Next Generation Apache Hadoop MapReduceFramework

    转自:http://blog.csdn.net/colorant/article/details/9146201 == 目标问题 == 下一代的Hadoop框架,支持10,000+节点规模的Hadoo ...

  9. thinkphp 连接mssql 当local失效时

    <?php return array( //'配置项'=>'配置值' //'USERNAME'=>'admin', //赋值 //数据库配置信息 'DB_TYPE' => 'm ...

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

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