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
posted @ 2020-08-10 21:53  以己为镜  阅读(592)  评论(0编辑  收藏  举报