select2实例和一些参数详解

最新推荐文章于 2025-07-10 09:47:55 发布

yue_yue_moon

最新推荐文章于 2025-07-10 09:47:55 发布

阅读量3.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： jQuery 插件

本文链接：https://blog.youkuaiyun.com/yue_yue_moon/article/details/89384875

jQuery 同时被 2 个专栏收录

4 篇文章

订阅专栏

插件

1 篇文章

订阅专栏

本文深入讲解了Select2组件的使用方法，包括基本配置、事件监听及版本差异。提供了详细的JS代码示例，涵盖语言设置、样式调整、多选功能、自定义数据处理等，适合前端开发者快速上手。

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

select2

效果如下：
在这里插入图片描述

js代码

 function search2ProductList(){
    ("#select").select2({
        language: "zh-CN", //设置语言
        placeholder: "--请选择产品--",  //默认文本
        allowClear: true,  //为true在框内有删除x, false不可清除
        width: '226px', //选择框宽度
        multiple: true,//是否允许选择多个值
        formatNoMatches: '没有符合条件的信息！',//当搜索不到的时候的提示语
        dropdownCssClass: 'select2Class', //给下拉添加类名
        ajax: {
            url: 'getSelectData',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                //版本4以前的用params  : params，4以后的用userName: params.term || '' 
                    params  : params  //下拉框中输入的参数
                };
            },
            //版本4以前的用results，4以后的用processResults
            results: function (data, params) {
                var array = new Array();
                if (data.bo) {
                    for (var i = 0; i < data.length; i++) {
                        array.push({id: data[i].id, text: data[i].name, qita: data[i].qita});
                        //id为必须的
                        //text为展示的内容
                        //qita为自己命名的一些数据可以有多个自定义数据
                    }
                }
                var result = new Object();
                result.results = array;
                return result;
            },
            formatSelection: function () {
                //当前选择的数据
            }
        }
    });
    $("#select_product").on("change", function (e) {  //下拉时候的事件
        var name = e.added.name;  //获取当前的值
    });
}

一些常用事件

 $("#select2").on("select2-opening", function (e) {
       console.log('下拉列表打开中调用');
    });
    $("#select2").on("select2-open", function (e) {
        console.log('显示下拉列表后调用');
    });
  $("#select2").on("select2-close", function (e) {
        console.log('关闭下拉列表后调用');
    });
 $("#select2").on("select2-highlight", function (e) {
        console.log('在下拉列表中突出显示某个选项时调用');
    });
$("#select2").on("select2-selecting", function (e) {
        console.log('在下拉列表中选择某个选项时，但在对该选项进行任何修改之前调用');
    });
  $("#select2").on("select2-clearing", function (e) {
        console.log('清除选择的内容的时候调用');
    }); 
 $("#select2").on("select2-removing", function (e) {
        console.log('当要在下拉列表或者输入框中删除某个选项，但尚未删除该选项时调用');
    });
 $("#select2").on("select2-removed", function (e) {
        console.log('删除或清除选项时调用');
    });
 $("#select2").on("select2-loaded", function (e) {
        console.log('当查询函数加载完数据且结果列表已更新时调用');
    });
 $("#select2").on("select2-focus", function (e) {
        console.log('在控件聚焦时触发');
    });
$("#select2").on("select2-blur", function (e) {
        console.log('在控件失去焦点时触发');
    });