select2(前端选择框_框架)
1.官网
简介
select是一个优化下拉框select的jQuery插件,它支持搜索(搜索选择)、远程数据集、
以及无限滚动的结果。最近的还支持下拉分组,下拉标签。同时,提供了很多相关的方法,
比如获取下拉选项值val,下拉选项ID,下拉选项jQuery对象节点等。
官网 | |
---|---|
链接 |
2.安装
注意此框架依赖于jquery
2.1cdn安装
:直接复制即可
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
2.2在github中下载源码:
下载之后解压文件在其中的
dist
文件夹中就是我们需要的文件
3.演示
演示最常用的搜索框select
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>select_day01</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
</head>
<body>
<select style="width: 800px;" class="js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</body>
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
</script>
</html>
代码演示
# 注意事项 > 与前端不分离开发配合使用的时候如果循环添加没有出现效果 请在循环方法中加载sellect对应的js