Select2 开源项目教程

2026-01-16 09:41:27作者：卓炯娓

项目介绍

Select2 是一个基于 jQuery 的替代选择框。它支持搜索远程数据集和无限滚动结果。Select2 提供了丰富的功能，如增强原生选择框的搜索功能、更好的多选界面、通过 AJAX 轻松加载可搜索的项目、支持多级选项组嵌套、标签功能、处理大型远程数据集、分页加载大型数据集以及自定义结果和选择的渲染。

项目快速启动

安装

你可以通过以下方式安装 Select2：

# 通过 npm 安装
npm install select2

# 或者通过 CDN 引入
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

基本使用

以下是一个基本的 Select2 使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select2 示例</title>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
</head>
<body>
    <select class="js-example-basic-single" name="state">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <!-- 更多选项 -->
    </select>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.js-example-basic-single').select2();
        });
    </script>
</body>
</html>

应用案例和最佳实践

增强原生选择框

Select2 可以用来增强原生选择框，提供搜索功能和更好的多选界面。以下是一个示例：

<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <!-- 更多选项 -->
</select>

<script>
    $(document).ready(function() {
        $('.js-example-basic-multiple').select2();
    });
</script>

通过 AJAX 加载数据

Select2 支持通过 AJAX 加载数据，以下是一个示例：

<select class="js-data-example-ajax"></select>

<script>
    $(document).ready(function() {
        $('.js-data-example-ajax').select2({
            ajax: {
                url: 'https://api.github.com/search/repositories',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term, // 搜索词
                        page: params.page
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.items,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: true
            },
            minimumInputLength: 1,
            templateResult: formatRepo,
            templateSelection: formatRepoSelection
        });

        function formatRepo (repo) {
            if (repo.loading) {
                return repo.text;
            }

            var $container = $(