jQuery Select2教程，如何快速上手使用？-建站教程-锦华智联科技

jQuery Select2 超详细教程

Select2 是一个基于 jQuery 的非常流行的下拉选择框插件，它对原生 HTML 的 <select> 标签进行了功能增强和美化，提供了搜索、标签、远程数据源、延迟加载等丰富功能，极大地提升了用户体验。

（图片来源网络，侵删）

为什么选择 Select2？
快速入门：第一个 Select2 程序
基础配置选项
- placeholder
- allowClear
- multiple
- minimumInputLength
- language
数据加载
- 从 <select> 元素初始化
- 从 JavaScript 数组初始化
- 从 AJAX (URL) 远程加载
事件处理
- change
- select2-opening
- select2-closing
方法调用
- val()
- trigger()
- destroy()
- open() / close()
高级主题：使用模板自定义显示
完整示例代码
总结与资源

为什么选择 Select2？

相比于原生 HTML <select>，Select2 提供了以下优势：

搜索功能：在选项很多时，用户可以通过输入文本来快速筛选。
多选支持：优雅地支持多选，并已选标签的形式展示。
标签模式：允许用户输入新的、不在预设列表中的选项。
远程数据源：可以从服务器动态加载数据，非常适合大数据量的场景。
高度可定制：可以通过模板自定义选项和结果的显示样式。
优秀的用户体验：支持键盘导航、延迟加载等，交互流畅。
美化界面：默认样式美观，且易于通过 CSS 进行主题定制。

快速入门：第一个 Select2 程序

这一步将教你如何快速将一个普通的下拉框变成功能强大的 Select2 控件。

步骤 1：引入必要的文件

你需要在 HTML 页面中引入 jQuery、Select2 的 CSS 和 JavaScript 文件，你可以从 CDN 或官网下载这些文件。

（图片来源网络，侵删）

<!-- jQuery (必需) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

步骤 2：创建 HTML 结构

创建一个普通的 <select> 元素，你可以给它一个 id 或 class 以便 jQuery 选择它。

<select id="single-select-example">
  <option value="">请选择一个选项</option>
  <option value="1">选项 1</option>
  <option value="2">选项 2</option>
  <option value="3">选项 3</option>
</select>

步骤 3：使用 jQuery 初始化 Select2

在 <script> 标签中，使用 jQuery 选择器找到你的 <select> 元素，并调用 .select2() 方法。

$(document).ready(function() {
    $('#single-select-example').select2();
});

完成！ 现在刷新你的 HTML 页面，你会看到一个已经美化和功能增强的下拉框。

基础配置选项

在调用 .select2() 时，你可以传递一个对象来配置它的行为。

$('#my-select').select2({
    option1: 'value1',
    option2: 'value2'
});

常用配置选项：

`placeholder`

当选择框中没有值时显示的提示文本,对单选框特别有用。

$('#single-select-example').select2({
    placeholder: "请选择一个城市",
    allowClear: true // 允许用户清除选择
});

`allowClear`

是否显示清除按钮（一个 "x" 图标），需要和 placeholder 一起使用效果最好。

$('#single-select-example').select2({
    placeholder: "请选择一个城市",
    allowClear: true
});

`multiple`

设置为 true 时，启用多选模式。

<!-- HTML -->
<select id="multi-select-example" multiple>
    <option value="1">选项 1</option>
    <option value="2">选项 2</option>
    <option value="3">选项 3</option>
</select>

// JavaScript
$('#multi-select-example').select2({
    placeholder: "请选择一个或多个选项"
});

`minimumInputLength`

在启用搜索时,用户至少需要输入多少个字符才会触发搜索，适用于 AJAX 加载，避免频繁请求。

$('#ajax-select-example').select2({
    minimumInputLength: 2 // 用户至少输入2个字符才开始搜索
});

`language`

设置 Select2 的语言，你需要引入对应的语言文件。

<!-- 引入中文语言包 -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/i18n/zh-CN.js"></script>

$('#my-select').select2({
    language: "zh-CN" // 设置为中文
});

数据加载

Select2 支持三种主要的数据初始化方式。

从 `<select>` 元素初始化

这是最简单的方式,如“快速入门”中所示，Select2 会自动解析 <option>

<select id="from-select">
    <option value="CA">加利福尼亚</option>
    <option value="TX">德克萨斯</option>
    <option value="FL">佛罗里达</option>
</select>
<script>
    $('#from-select').select2();
</script>


从 JavaScript 数组初始化
你可以直接传递一个 JavaScript 对象数组来创建选项。
$(document).ready(function() {
    var data = [
        { id: 'JAN', text: '一月' },
        { id: 'FEB', text: '二月' },
        { id: 'MAR', text: '三月' }
    ];
    $('#array-data-select').select2({
        data: data
    });
});
从 AJAX (URL) 远程加载
这是 Select2 最强大的功能之一，适用于从数据库或 API 动态获取数据。
$('#ajax-data-select').select2({
    ajax: {
        url: 'https://api.example.com/search', // 请求的URL
        dataType: 'json', // 预期服务器返回的数据类型
        delay: 250, // 延迟，避免频繁请求
        data: function (params) {
            // params 包含了搜索词
            return {
                q: params.term // 将搜索词作为 'q' 参数发送
            };
        },
        processResults: function (data) {
            // 将服务器返回的数据转换为 Select2 需要的格式
            return {
                results: data.items
            };
        },
        cache: true
    }
});
服务器端应返回 JSON 格式，
{
  "items": [
    { "id": 1, "text": "选项 1" },
    { "id": 2, "text": "选项 2" }
  ]
}

事件处理
你可以监听 Select2 触发的事件来执行自定义逻辑。
$('#my-select').on('change', function() {
    // 当选择改变时触发
    var selectedValue = $(this).val(); // 获取选中的值
    console.log('当前选中的值是: ' + selectedValue);
});
常用事件：

change: 当选择项发生变化时触发（包括通过代码 val() 方法设置）。
select2-opening: 在下拉框打开之前触发。
select2-closing: 在下拉框关闭之前触发。
select2:select: 当一个新选项被选中时触发。
select2:unselect: 当一个已选项被取消选中时触发（多选模式下）。

// 示例：监听选中事件
$('#multi-select-example').on('select2:select', function (e) {
    var selected = $(e.target).val();
    console.log('选中了: ' + selected);
});
// 示例：监听取消选中事件
$('#multi-select-example').on('select2:unselect', function (e) {
    var unselected = $(e.target).val();
    console.log('取消了: ' + unselected);
});

方法调用
你可以通过 $.fn.select2 命名空间来调用 Select2 的方法。
// 假设我们有一个 select 元素
var $select = $('#my-select');
val()
获取或设置 Select2 的值。
// 获取值
var value = $select.val();
console.log('当前值: ' + value);
// 设置值
$select.val('2').trigger('change'); // 设置值为 '2'，并触发 change 事件
trigger()
触发 Select2 的事件，在通过 val() 设置值后，通常需要手动触发 change 事件，以确保其他依赖此值的组件得到更新。
$select.val('3').trigger('change');
destroy()
销毁 Select2 实例，将 <select> 元素恢复到原始状态。
$select.select2('destroy');
open() / close()
以编程方式打开或关闭下拉框。
// 打开下拉框
$select.select2('open');
// 关闭下拉框
$select.select2('close');

高级主题：使用模板自定义显示
Select2 允许你使用自定义的 HTML 模板来渲染下拉选项和已选结果，这对于显示图片、图标或更复杂的信息非常有用。
$('#template-select').select2({
    templateResult: formatState, // 用于渲染下拉列表中的选项
    templateSelection: formatSelection // 用于渲染已选中的选项
});
// 渲染下拉选项的函数
function formatState (state) {
    if (!state.id) {
        return state.text; // 渲染占位符
    }
    var $state = $(
        '<span><img src="https://via.placeholder.com/30" class="img-flag" /> ' + state.text + '</span>'
    );
    return $state;
}
// 渲染已选项的函数
function formatSelection (state) {
    return state.text; // 已选项只显示文本
}
注意：这里的 state 对象就是你的数据项（如 {id: 1, text: '选项'}）。

完整示例代码
这是一个包含多选、AJAX 加载、事件和方法调用的完整 HTML 页面示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">Select2 完整示例</title>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <!-- 中文语言包 -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/i18n/zh-CN.js"></script>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        .container { max-width: 600px; margin: auto; }
        .form-group { margin-bottom: 15px; }
        select { width: 100%; }
        #log { margin-top: 20px; padding: 10px; border: 1px solid #ccc; background-color: #f9f9f9; min-height: 50px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Select2 完整示例</h1>
        <div class="form-group">
            <label>1. 基础单选框</label>
            <select id="basic-single">
                <option value="">请选择一个选项</option>
                <option value="1">选项 1</option>
                <option value="2">选项 2</option>
                <option value="3">选项 3</option>
            </select>
        </div>
        <div class="form-group">
            <label>2. 带清除和占位符的多选框</label>
            <select id="basic-multiple" multiple="multiple"></select>
        </div>
        <div class="form-group">
            <label>3. AJAX 搜索框 (模拟)</label>
            <input type="hidden" id="ajax-select" style="width: 100%;">
        </div>
        <hr>
        <button id="get-value-btn">获取值</button>
        <button id="set-value-btn">设置值为 2</button>
        <button id="destroy-btn">销毁 Select2</button>
        <h3>日志输出</h3>
        <div id="log"></div>
    </div>
    <script>
    $(document).ready(function() {
        // 初始化基础单选框
        $('#basic-single').select2({
            language: "zh-CN",
            placeholder: "请选择一个选项",
            allowClear: true
        });
        // 初始化基础多选框
        var data = [
            { id: 'AL', text: 'Alabama' },
            { id: 'WY', text: 'Wyoming' }
        ];
        $('#basic-multiple').select2({
            language: "zh-CN",
            placeholder: "请选择一个或多个州",
            data: data
        });
        // 初始化 AJAX 搜索框
        function formatRepo (repo) {
            if (repo.loading) {
                return repo.text;
            }
            var markup = "<div class='select2-result-repository clearfix'>" +
                "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
                "<div class='select2-result-repository__meta'>" +
                "<div class='select2-result-repository__title'>" + repo.full_name + "</div>" +
                "<div class='select2-result-repository__description'>" + repo.description + "</div>" +
                "</div></div>";
            return markup;
        }
        function formatRepoSelection (repo) {
            return repo.full_name || repo.text;
        }
        $("#ajax-select").select2({
            language: "zh-CN",
            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
            },
            escapeMarkup: function (markup) { return markup; }, // 防止 XSS
            minimumInputLength: 1,
            templateResult: formatRepo,
            templateSelection: formatRepoSelection
        });
        // 事件监听
        $('#basic-single, #basic-multiple, #ajax-select').on('change', function(e) {
            log('change 事件触发，值为: ' + $(this).val());
        });
        $('#basic-multiple').on('select2:select', function (e) {
            log('选中了: ' + $(e.params.data).text());
        });
        // 方法调用
        $('#get-value-btn').on('click', function() {
            var val = $('#basic-single').val();
            log('获取到的值是: ' + val);
        });
        $('#set-value-btn').on('click', function() {
            $('#basic-single').val('2').trigger('change');
            log('已将值设置为 2');
        });
        $('#destroy-btn').on('click', function() {
            $('#basic-single').select2('destroy');
            log('已销毁 basic-single 的 Select2 实例');
        });
        // 日志辅助函数
        function log(message) {
            $('#log').append('<p>' + new Date().toLocaleTimeString() + ': ' + message + '</p>');
        }
    });
    </script>
</body>
</html>

总结与资源

Select2 是一个功能极其强大且灵活的插件，通过本教程，你已经学会了：

如何快速引入和初始化 Select2。
如何使用核心配置选项来满足基本需求。
如何从不同来源（HTML、JS、AJAX）加载数据。
如何监听事件和调用方法来控制组件。
如何使用模板进行深度自定义。

官方资源

Select2 官方网站: 最权威的文档和示例。
Select2 GitHub 仓库: 源代码、问题跟踪和更新日志。
API 文档: 详细列出了所有配置选项、方法和事件。

希望这份教程对你有帮助！

jQuery Select2教程，如何快速上手使用？

jQuery Select2 超详细教程

目录

为什么选择 Select2？

快速入门：第一个 Select2 程序

基础配置选项

`placeholder`

`allowClear`

`multiple`

`minimumInputLength`

`language`

数据加载

从 `<select>` 元素初始化

从 JavaScript 数组初始化

从 AJAX (URL) 远程加载

事件处理

方法调用

`val()`

`trigger()`

`destroy()`

`open()` / `close()`

高级主题：使用模板自定义显示

完整示例代码

总结与资源

jQuery Select2教程，如何快速上手使用？

jQuery Select2 超详细教程

目录

为什么选择 Select2？

快速入门：第一个 Select2 程序

基础配置选项

placeholder

allowClear

multiple

minimumInputLength

language

数据加载

从 <select> 元素初始化

从 JavaScript 数组初始化

从 AJAX (URL) 远程加载

事件处理

方法调用

val()

trigger()

destroy()

open() / close()

高级主题：使用模板自定义显示

完整示例代码

总结与资源

`placeholder`

`allowClear`

`multiple`

`minimumInputLength`

`language`

从 `<select>` 元素初始化

`val()`

`trigger()`

`destroy()`

`open()` / `close()`