【Select2】带搜索框的下拉框美化插件
2024-09-26 19:41:39
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
最新文章
- HTML5 中的 canvas 画布(二)
- SSISDB2:使用TSQL执行Package
- [CC]手动点云分割
- crontab每秒执行URL接口
- vue 滚动加载
- POJ 1308
- Centos7安装杀毒软件ClamAV
- POJ--2289--Jamie&;#39;s Contact Groups【二分图的多个匹配+二分法答案】
- .Neter玩转Linux系列之六:Linux下MySQL的安装、配置、使用
- LeetCode 342. Power of Four (4的次方)
- css动画-音频跳动
- Java的三大特性
- SQL :“传入的表格格式数据流(TDS)远程过程调用(RPC)协议流不正确” 错误
- Django积木块八——三级联动
- Linux基本命令总结(一)
- volatile和synchronized
- sql in not in 案例用 exists not exists 代替
- ACM-ICPC 2018 徐州赛区网络预赛 G. Trace
- Java ArrayList中对象的排序 (Comparable VS Comparator)
- 1116 Come on! Let&#39;s C (20 分)
热门文章
- 【WPF/WAF】设置快捷键(Shortcut Key)
- valgrind: failed to start tool &#39;memcheck&#39; for platform &#39;amd64-linux
- Linux kernel 生成 /dev/spidev*
- u-boot源码分析
- Oracle数据误删除的恢复操作
- MVC出现错误:系统找不到指定文件(异常来自 HRSULT:0x80070002)
- [android] AndroidManifest.xml 详解
- 写给大忙人的JavaSE 8 - 学习
- sqlserver 字符串split
- xpath的数据和节点类型以及XPath中节点匹配的基本方法