select2学习笔记

最新推荐文章于 2024-07-30 11:44:31 发布

fangzilixia

最新推荐文章于 2024-07-30 11:44:31 发布

阅读量4.9k

点赞数

分类专栏： JavaScript&jQuery HTML&CSS Bootstrap 、控件工具 Web前端学习笔记文章标签： select2 JavaScript 控件 jquery

本文链接：https://blog.youkuaiyun.com/fangzilixia/article/details/50923686

版权

Web前端学习笔记同时被 3 个专栏收录

15 篇文章

订阅专栏

JavaScript&jQuery

6 篇文章

订阅专栏

Bootstrap 、控件工具

5 篇文章

订阅专栏

本文是关于Select2组件的学习笔记，主要探讨了如何在HTML页面中使用Select2这一JavaScript库来增强传统的选择框功能，包括其基本用法、选项加载和事件监听等方面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

set：

var set = {
    allowClear: true,
    maximumInputLength: 20,//允许搜索长度
    minimumResultsForSearch: 20,//至少20个结果的时候显示搜索
    minimumResultsForSearch: Infinity,//永久隐藏搜索框
    selectOnClose: true,//结果显示高亮
    closeOnSelect: false,//select选中关闭下拉框
    selectableOptgroup:true,
    tags: true,//根据搜索框创建option
    dropdownParent: $('#my_amazing_modal'),//选择元素追加到下拉框
    separator: ",",//分隔符
    templateResult: function (data) {
        if (data.id === '') { // adjust for custom placeholder values
            return 'Custom styled placeholder text';
        }

        return data.text;
    }
}

初始化：

HTML页面

<select class="medium m-wrap select2_sample1" id="MediacyID" name="MediacyID"  multiple>

JS页面

$eventSelect = $('.select2_sample1').select2(set)

事件：

//置空
$eventSelect.val(null).trigger("change");
//选中
$eventSelect.on("selected", function (e) { })
//移除
$eventSelect.on("removed", function () {
})
//多个事件
$eventSelect.on("close removed", function () { })

// 获取value和text
$("#xa").val();
$("#xa").select2("val");
$("#xa").select2('data').text