Select2使用-zodream梦想开源/个人编程日记

Select2是一款基于JQuery的下拉列表插件，主要用来优化select，支持单选和多选，同时也支持分组显示、列表检索、远程获取数据等功能。

下载

官网

准备

JQuery

select2.min.css

select2.min.js

使用

普通使用

html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="select2.min.css">
</head>
<body>
    <select name="name">
        <option value="1">1</option>
        <option value="2" selected>2</option>
    </select>
    <script src="jquery-3.5.1.min.js"></script>
    <script src="select2.min.js"></script>
    <script>
        $(function() {
            $('select').select2();
        });
    </script>
</body>
</html>

123456789101112131415161718192021222324

提示

$('select').select2({
    placeholder: '请选择'
});

123

加载本地数据

需要两个数据属性id和text

var data = [
    {id: 1, text: '1'}
];
$('select').select2({
    data: data
});

123456

加载远程数据

$('select').select2({
    ajax: {
        url: 'tags',
        data: function (params) {
            return {
                keywords: params.term, // keywords为发送到服务端的参数名，params.term表示输入框中输入的内容
                page: params.page || 1
            };
        },
        processResults: function (data) {
            data = data.data;
            return {
                results: data.data.map(item => {
                    return {
                        id: item.id,
                        text: item.name,
                    }
                }),
                pagination: {
                    // 是否还有下一页
                    more: data.paging.more
                }
            };
        }
    }
});

1234567891011121314151617181920212223242526

设置默认选中

html

<select name="name[]" multiple>
    <option value="1" selected>1</option>
    <option value="2" selected>2</option>
</select>

1234

转载请保留原文链接： https://zodream.cn/blog/id/127.html

Cookie	有效期	说明
cookie_policy	11个月	Cookie 插件设置 Cookie 的目的是存储用户对使用 Cookie 的同意；它不会存储任何个人数据。
PHPSESSID	11个月	用于绑定用户登录凭证的 Cookie 标识
XSRF-TOKEN	11个月	用于防止跨站脚本攻击的 Cookie 标识