前言
bootstrap和select2是强大的前端布局样式框架,其低调简约的风格深受人们的好评。本人在平时会制作一些基于bootstrap和select2的定制样式,算是练手吧!如有建议和意见,欢迎评论交流!
样式预览
如上图所示,1是一个展示框,2是一个下拉框。下拉框内置搜索筛选功能,在下拉框中选中的元素会以标签的形式表现在展示框内。点击展示框内的标签,会删除当前的元素。如下图所示
设计思路
1.展示框其实是一个div,使用监听事件change()监听下拉框的变化。
2.每当下拉框选中元素时,使用append()在展示框内加入拼接字符串形式的子元素。
3.对子元素的样式进行调整,子元素的文本为获取到的下拉框的value值(text值也可以,看自己需求)。
4.最后使用scrollTop()将展示框始终在最底下(这样做是一方展示框数据过多生成滚动条时,使展示框始终位于最底部,便于查看新增加的标签)
代码
代码
请注意导包!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<link href="./css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<script src