使用多项选择select2选择选项后，立即显示所选选项的数量

基础概念

Select2 是一个 jQuery 插件，用于增强 HTML <select> 元素的功能，使其支持搜索、远程数据集、无限滚动等功能。它允许用户通过键盘或鼠标快速选择选项，并且可以自定义显示格式。

类型与应用场景

单选：适用于需要用户选择一个选项的场景。
多选：适用于需要用户选择多个选项的场景，如权限管理、标签选择等。

示例代码

以下是一个简单的示例，展示如何使用 Select2 并在选择选项后立即显示所选选项的数量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Select2 Example</title>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <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>
</head>
<body>
    <select id="mySelect" multiple="multiple">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="cherry">Cherry</option>
        <option value="date">Date</option>
    </select>
    <div id="selectedCount"></div>

    <script>
        $(document).ready(function() {
            $('#mySelect').select2();

            $('#mySelect').on('change', function() {
                var selectedCount = $(this).val().length;
                $('#selectedCount').text('Selected: ' + selectedCount);
            });
        });
    </script>
</body>
</html>