select2封装用法

select2插件，ajax后台带条件请求，赋值，回显数据，
单选多选：multiple="multiple"，单选删除属性multiple
选择选中值：$("#id").getSelectValue();
选择选中text：$("#id").getSelectText();
//需要回显学生id,多个逗号分隔。
var new_value="1,2,3,4";
$("#id").setValues(new_value);
清空：$("#id").clear();
change事件：
$("#id").on("change", function (e) {
var data = $(this).val();
console.info("change:"+data);
});
初始化参数：
查询状态status=1,默认status=0。
var options={'status': '1'};
$("#id").create(options);

参考地址：https://select2.org/ 

<link href='../static/select2.min.css' rel='stylesheet' type='text/css'>
        </link>
        <link href='../static/bootstrap.min.css' rel='stylesheet' type='text/css'>
        </link>

　　　　　　<link rel="stylesheet" href="./static/select2-bootstrap-5-theme.min.css">

        <script src='../static/jquery-1.10.2.min.js'></script>
        <script src='../static/select2.min.js'></script>
        <script src='../static/select2plug.js'></script>

<br />
        <h1 align="left">
            <strong>select2 jquery插件，返回多列无表头。数据可以根据条件多次ajax请求。</strong>
        </h1>
        <select id="lookupDemo" multiple="multiple" style="width: 50%"></select>
        <a type="button" onclick="onClick">获取值</a>
        <a type="button" onclick="onClick2">赋值</a>
        <a type="button" onclick="onClick3">清空</a>
        <br />
        <br />
        <script type="text/javascript">
            //初始化参数。如默认状态过滤。status=1,type=2等。
            //var options={"status": '1',"type":"2"};    
            //$("#lookupDemo").create(options);
            $("#lookupDemo").create("");

            //获取选中值。
            function onClick() {
                alert("获取选中值 value:" + $("#lookupDemo").getSelectValue());
                alert("获取选中值 text:" + $("#lookupDemo").getSelectText());
            }

            //赋值，回显数据。需要根据id,text回显数据，如果不知道text,建议填写id。
            function onClick2() {
                var new_value = "1,2,3,4";
                $("#lookupDemo").setValues(new_value);
            }

            //清空。
            function onClick3() {
                $("#lookupDemo").clear();
            }

            //无法执行。
            function change1() {
                console.info('123123');
            }

            //每当一个选项被选择或删除触发。
            $("#lookupDemo").on("change", function (e) {
                var data = $(this).val();
                console.info("change:" + data);
            });

            //select事件
            $("#lookupDemo").on("select2:select", function () {
                var data = $(this).val();
                console.info("select:" + data);
            });

        </script>

 

select2plug.js：

; (function ($) {
    $.fn.extend({
        create: function (options) {
            //使用jQuery.extend 覆盖插件默认参数
            var opts = $.extend({}, defaluts, options);
            var status = '0';
            if (opts.status == '1') {
                vendor = '1';
            }
            var searchCond = { 'status': status };
            var $this = this;
            var id = $this.attr("id");
            $('#' + id).select2(
                {
                    ajax: {
                        delay: 250, // 在触发请求之前等待250毫秒
                        url: 'http://localhost:8080/default/getUserByKey',
                        dataType: 'json',
                        data: function (params) {
                            var query = {
                                key: params.term,
                                type: 'public',
                                searchCond: JSON.stringify(searchCond)
                            }
                            // 查询参数将是 ?search=[term]&type=public
                            return query;
                        },
                        // 附加的AJAX参数在这里；关于这个例子的完整代码，请参阅本章末尾
                        processResults: function (
                            data) {
                            var formatData = [];
                            $
                                .each(
                                    data.data,
                                    function (
                                        i,
                                        item) {
                                        if (id != undefined && id != null && id != '') {
                                            var one = {
                                                id: item.empCode,
                                                text: item.name != undefined ? item.cnEmpName : '',
                                                enName: item.enName != undefined ? item.enName : '',
                                                companyName: item.companyName != undefined ? item.companyName : '',
                                                enCompanyName: item.enCompanyName != undefined ? item.enCompanyName : '',
                                            };
                                            formatData
                                                .push(one);
                                        }

                                    });
                            return {
                                results: formatData
                            };
                        }
                    },
                    templateResult: formatSelect,
                    escapeMarkup: function (m) { return m; },
                    matcher: matcher,
                    maximumSelectionLength: 20,
                    placeholder: 'Select an option',
                    allowClear: true,
　　　　　　　　　　　　theme: 'bootstrap-5',

            　　　　　　width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',

            　　　　　　closeOnSelect: false,

                });


            //显示多列：名称，英文名称，公司，英文公司名称。    
            function formatSelect(result) {
                if (result.loading) {
                    console.log('showing row');
                    return result.text;
                } else {
                    return '<div class="row">' +
                        '<div class="col-xs-3">' + result.name + '</div>' +
                        '<div class="col-xs-3">' + result.enName + '</div>' +
                        '<div class="col-xs-3">' + result.companyName + '</div>' +
                        '<div class="col-xs-3">' + result.enCompanyName + '</div>' +
                        '</div>';
                }
            }
            function matcher(query, option) {
                firstEmptySelect = true;
                if (!query.term) {
                    return option;
                }
                var has = true;
                var words = query.term.toUpperCase().split(" ");
                for (var i = 0; i < words.length; i++) {
                    var word = words[i];
                    has = has && (option.text.toUpperCase().indexOf(word) >= 0);
                }
                if (has) return option;
                return false;
            }
        },
        //获取选中值,多个逗号分隔。
        getSelectValue: function () {
            var $this = this;
            var id = $this.attr("id");
            var value = $("#" + id).select2("val");
            return value;
        },
        //获取选中text,多个逗号分隔。
        getSelectText: function () {
            var $this = this;
            var id = $this.attr("id");
            var data = $("#" + id).select2('data');
            var text = [];
            $.each(data, function (index, e) {
                text.push(e.text);
            });
            return text;
        },
        //赋值，回显数据。需要根据id,text回显数据，如果不知道text,建议填写id。需要根据条件ajax查询后台，
        //jsonArray 数组
        setValues: function (jsonArray) {
            var $this = this;
            var id = $this.attr("id");
            //回显数据，需要根据empId去查询名称。
            var cond = { ids: jsonArray, "status": "1" };
            mini.ajax({
                url: "http://localhost:8080/default/getUserByKey",
                data: { "cond": JSON.stringify(cond) },
                type: "POST",
                async: false,
                success: function (text) {
                    var result = nui.decode(text);
                    if (result.data && result.data.length > 0) {
                        //添加前清除。
                        $("#"+id).empty();
                        for (var i = 0; i < result.data.length; i++) {
                            var item = result.data[i];
                            var option = new Option(item.cnEmpName, item.empCode, true, true);
                            $("#" + id).append(option).trigger('change');
                        }
                        // manually trigger the `select2:select` event
                        $("#"+id).trigger({
                            type: 'select2:select',
                            params: {
                                data: result.data
                            }
                        });
                    }
                }
            });
        },
        //清空。
        clear: function () {
            var $this = this;
            var id = $this.attr("id");
            $("#" + id).val(null).trigger('change');
        },
    });
    //默认参数
    var defaluts = {
        status: '1',
    };
})(jQuery);

 
链接：https://pan.baidu.com/s/1-UpEsNBQZA_-RBdhL5NU9w 
提取码：qll4