Enjoy the good life everyday！
关闭
欢迎来PyGo个人空间 ^_^
Select2的基础使用 | PyGo²

Select2的基础使用

创建时间： | 分类于 | 阅读量：
本文字数： 1.9k | 阅读时长 ≈ 2 分钟

写html的人必定用过select标签，样式确实有些。。。如果自己写样式可以。
上网找select组件，发现select2，有好的组件咱们直接用就好了。

Select2

下载地址

下载之后放在本地。
CSS：https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css
JS：https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="select2-4.1.0/select2.min.css" rel="stylesheet" />
    <script src="select2-4.1.0/select2.min.js"></script>
</head>
<body>
    <select class="js-example-basic-single" name="state" multiple="multiple" style="width: 100%;">
      <option value="AL">Alabama</option>
      <option value="WY">Wyoming</option>
    </select>
</body>
<script>
    $(document).ready(function() {
        $('.js-example-basic-single').select2();
    });
</script>
</html>

需要其他写法的可以查看官网。

配置

1
2
3
4
5
6
7
8
9
10
11
$('#problem_types').select2({
    placeholder: '可多选，最多支持4个一级分类，支持模糊查询',
    maximumSelectionLength: 4,
    allowClear: true,
    closeOnSelect: false,
    selectionCssClass: 'info_red',
    //dropdownCssClass: 'info_red',
    tags: false,
    tokenSeparators: [',', ' '], // 多选 - 输入逗号和空格会自动完成一个选项 前提是：tags: true
    //theme: "classic"
});
  • multiple：支持多选
  • placeholder：标签的默认文字显示
  • maximumSelectionLength：最大选择的个数
  • allowClear：启用一键清除选择的功能
  • closeOnSelect：是否选择一个就关闭option选择栏
  • selectionCssClass：选择的options类x的样式类
  • dropdownCssClass：下拉列表的文字样式
  • tags：是否启动自定义选择的功能
  • tokenSeparators：输入逗号和空格会自动完成一个选项 前提是：tags: true
  • theme：select2的样式，目前只看到了classic还有默认

学习参考

官网：https://select2.org/
配置：https://select2.org/configuration/options-api

  • 本文作者：mingliang.gao【一个爱老婆的Python程序猿。。。。。。】
  • 本文链接： http://pygo2.top/articles/47159/
  • 版权声明： 本博客所有文章欢迎转载，转载请注明出处！
觉得有帮助 请偶坐个公交车
0%