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. HDU 3938:Portal(并查集+离线处理)

    http://acm.hdu.edu.cn/showproblem.php?pid=3938 Portal Problem Description   ZLGG found a magic theor ...

  2. Maven发布项目到Nexus私服中 (发布jar包)

    目录 1 需求说明 2 实现步骤 2.1 Maven服务的setting.xml文件 2.2 项目的pom.xml文件 2.3 发布项目 1 需求说明 开发完项目后, 将项目版本发布到Nexus私服中 ...

  3. AD域和LDAP协议

    随着我们的习大大上台后,国家在网络信息安全方面就有了很明显的改变!所以现在好多做网络信息安全产品的公司和需要网络信息安全的公司都会提到用AD域服务器来验证,这里就简单的研究了一下! 先简单的讲讲AD域 ...

  4. c++2的幂次方

    c++2的幂次方 题目描述 任何一个正整数都可以用2的幂次方表示. 同时约定用括号来表示方次,即a的b次,可以表示为a(b). 由此可知,137可以表示为: 2(7)+2(3)+2(0) 进一步: ...

  5. Codeforces Round #565 (Div. 3) F.Destroy it!

    题目地址:http://codeforces.com/contest/1176/problem/F 思路:其实就是一个01背包问题,只是添加了回合和每回合的01限制,和每当已用牌数到了10的倍数,那张 ...

  6. ~~番外:说说Python 面向对象编程~~

    进击のpython Python 是支持面向对象的 很多情况下使用面向对象编程会使得代码更加容易扩展,并且可维护性更高 但是如果你写的多了或者某一对象非常复杂了,其中的一些写法会相当相当繁琐 而且我们 ...

  7. 一些ServiceFabric、Orleans、Asp.net Aore的例子

    Sample: ServiceFabric + Orleans + Asp.net Core : Asp.net Core 142 samples for ASP.NET Core 2.1 funda ...

  8. 【06】Jenkins:Gitlab 自动触发构建以及钉钉通知

    写在前面的话 在某些时候,我们希望能够实现这样一个功能,当用户提交东西到 gitlab 上的时候,希望它能够自动触发构建,发布到我们需要的环境. 目前我们内部有做类似的需求:产品提交原型到 gitla ...

  9. CitusDB UPSERT

    CitusDB的upsert功能 postgresql9.5 版本支持 "UPSERT" 特性, 这个特性支持 INSERT 语句定义 ON CONFLICT DO UPDATE/ ...

  10. MTSC2019第五届移动互联网测试开发大会PPT下载

    关注公众号「软件测试大本营」后台回复「MTSC」或「测试开发大会」即可获取云盘下载地址及提取码. 注:PPT文件版权归相关撰写人所有,仅供学习交流,请勿用于任何商业用途,谢谢 前不久在北京举办了第五届 ...