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. .Net 通过设置Access-Control-Allow-Origin来实现跨域访问

    目录 # 前言 # 为每个API接口单独添加响应头 1.针对 ASP.NET MVC 项目的Controllers 2.针对 ASP.NET Web API项目的Controllers 3.针对ASP ...

  2. springboot自动装配(1)---@SpringBootApplication注解怎么自动装配各种组件

    1.对于springboot个人认为它就是整合了各种组件,然后提供对应的自动装配和启动器(starter) 2.@SpringBootApplication注解其实就是组合注解,通过它找到自动装配的注 ...

  3. Android实现跳转到应用市场进行版本更新功能

    最近需要做应用版本更新功能,因为之前已经写过一篇版本更新的功能了,虽然请求接口还是用的HttpUrlConnection,想着改改现在应用使用的请求方式也挺快的嘛,心里开始暗喜,可以偷偷懒了,哈哈哈. ...

  4. centos7 添加用户,组

    centos7添加用户,组. groupadd projectUsers //添加组,组名projectUser. cat /etc/group //查看最后一行是projectUser. 添加用户并 ...

  5. v8环境搭建采坑记录

    项目组有把js接入C++服务求的需求,故开始了v8接入的工作,用了一天多时间,v8才在centos环境上成功安装,过程中踩了很多坑,下面将采坑过程记录如下: centos下编译安装v8:   查看ce ...

  6. MyBatis从入门到精通:各个实体类

    SysUser类: package tk.mybatis.simple.model; import java.util.Date; public class SysUser { public Long ...

  7. 远程调试出现DEP0600: 部署失败。无法通过新部署管道进行部署错误解决

    昨天我连接树莓派调试没问题,今天来的时候却总是出现DEP0600: 部署失败.无法通过新部署管道进行部署.错误 我怀疑是环境问题,然后发现蓝莓派上面没有远程调试监视器(MSVSMON.EXE)进程,怀 ...

  8. 《C#从入门到精通(第3版)》目录

    C#从入门到精通(第3版)pdf+源码 一.基础知识 1.初识C#及其开发环境 2.开始C#之旅 3.变量与常量 4.表达式与运算符 5.字符与字符串 6.流程控制语句 7.数组与集合 8.属性和方法 ...

  9. IP地址/掩码/网关/DNS的设置与工作原理(转)

    现在互联网飞速发展,工作中生活中上不了网的计算机是不可想象的,而电脑系统网络设置中的IP地址.子网掩码.默认网关及DNS服务器,怎么理解,它们是如何工作的,下面做个简单介绍. 通常的上网方式,是打开I ...

  10. MacBook Air多出一块磁盘?

    今天将MAC的系统升级到Mojave,启动之后发现系统挂载的磁盘变了,我记得升级之前文件系统是挂载在/dev/disk0上的,但是升级之后,文件系统挂载在/dev/disk1上了. 用diskutil ...