Web开发中,Select下拉框是常用的输入组件。由于原生的Select几乎很难通过CSS样式控制。一些好看的Select下拉框就只能通过模拟来实现。PHP程序员雷雪松给大家推荐一筐款不错的Select下拉框插件:Select2。Select2可以支持搜索、标签、远程数据、无限滚动、和许多其他非常优秀的选项,Select2还可以非常方便的自定义样式,基本可以实现所有的Select效果。下面PHP程序员雷雪松就详细的讲解一下Select2.js的用法。

1、引入select2.js和select2.css

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

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

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

2、Select2基础用法

<select class="js-select2" name="job">

<option value="phper">PHP程序员</option>

<option value="web">web前端</option>

</select>

$(document).ready(function() {

$('.js-select2').select2();

});

Select2官方网站:https://select2.org

来源:非常实用的select下拉框-Select2.js

非常实用的select下拉框-Select2.js的更多相关文章

  1. jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  2. select下拉框左右变换

    效果图: 使用jQuery插件---multiselect2side做法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...

  3. 一款基于jQuery的联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  4. jQuery制作简洁的多级联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  5. 带搜索框的select下拉框

    利用select2制作带有搜索功能的select下拉框 1.引入线上css和js <link href="https://cdnjs.cloudflare.com/ajax/libs/ ...

  6. s:select下拉框validation验证

    S:select下拉框验证: <td colspan="5"> <s:select name="vo.typeVO.corp" list=&q ...

  7. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  8. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

  9. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

随机推荐

  1. 28nm工艺下,自动生成管脚排列文件,给设计加PAD,并在PAD上面打Label的流程(含Tcl脚本)

    本文转自:自己的微信公众号<数字集成电路设计及EDA教程> 里面主要讲解数字IC前端.后端.DFT.低功耗设计以及验证等相关知识,并且讲解了其中用到的各种EDA工具的教程. 考虑到微信公众 ...

  2. 什么是JDK什么是JRE?JDK和JRE的关系

    什么是JDK什么是JRE?JDK和JRE的关系 我们看看来自百度百科的解释: JDK是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK是整个java开发的核心 ...

  3. 【学习笔记】动态规划—斜率优化DP(超详细)

    [学习笔记]动态规划-斜率优化DP(超详细) [前言] 第一次写这么长的文章. 写完后感觉对斜优的理解又加深了一些. 斜优通常与决策单调性同时出现.可以说决策单调性是斜率优化的前提. 斜率优化 \(D ...

  4. Java线程安全与数据同步

    import java.util.HashMap; import java.util.concurrent.TimeUnit; public class Test { public static vo ...

  5. Windows10 OpenSSH 快捷设置 避免 Bad owener or permission on

    配置ssh 有两个地方 ~/.ssh/config 这个亲测失败,怎么搞都报错 bad owner .... c:/programdata/ssh/ssh_config 亲测有效 (显示隐藏文件才看的 ...

  6. 通过windug判断某个模块导致程序不能退出。

    1.windug附加进程. 2.~* kb 3.看堆栈

  7. 你真的了解 Cookie 和 Session 吗

    我在做面试官的时候,曾经问过很多朋友这个问题: Cookie 和 Session 有什么区别呢?大部分的面试者应该都可以说上一两句,比如:什么是 Cookie?什么是 Session?两者的区别等. ...

  8. TP框架基础 (二) ---空控制器和空操作

    通过之前的学习我们知道了index.php是一个入口文件,如果没有这个入口文件的话,我们需要自己创建! [视图模板文件创建] 视图模板文件存放发位置在: 里面没有模板文件 如果我们想要访问Login控 ...

  9. Spring IoC源码探索(一)

    一.探索前:谈谈我对IoC容器的了解 IoC容器主要用于管理Bean的生命周期和对象间的关系,通过依赖注入(DI)对容器中的Bean所需要依赖的其他对象进行注入.而这一切都是在Ioc容器里边进行的,假 ...

  10. Charles(Windows/Android)入门使用

    一. 介绍以及下载(windows) Charles是一个HTTP代理/HTTP监视器/反向代理,使开发人员能够查看其机器和Internet之间所有HTTP和SSL/HTTPS流量,这包括请求,响应和 ...