Select2使用

Fork Me On Github
zodream 其他技术 Html 2020年05月

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

提示

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

加载本地数据

需要两个数据属性idtext

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

加载远程数据

js
                          
$('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
点击查看全文
0 198 0