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
