select2回显操作

1.在做项目的过程中，经常用到select2，它比select下拉框方便，经常有一些需求就是select搜出来显示的和回显到select框上的结果不一样。效果图如下：

下拉框搜索展示的

下拉框回显的值

代码如下:
代码中的加号是个人需要效果，根据自己需求自行调节

function formatSelectB(repo) {let split = repo.text.split("+");return split[0];
}

//select2赋值操作
function formatRepo(repo) {if (repo.loading) {return repo.text;}var $container = $("<div class='select2-result-repository clearfix'>" +"<div class='select2-result-repository__meta'>" +"<div class='select2-result-repository__title'></div>" +"</div>" +"</div>");$container.find(".select2-result-repository__title").text(repo.text);return $container;
}

allowClear设置为true，会有一个清除作用(蓝色框中)

$('#A').select2({placeholder: "请输入",language: "zh-CN",minimumInputLength: 0,allowClear: true,width: '200px',ajax: {url: "",dataType: 'json',method: 'get',data: function (params) {return {optionB: params.term};},processResults: function (data) {var options = new Array();$(data.data).each(function (i, o) {var optionName = o.optionBName == null || o.optionBName == undefined ? '' : o.optionBName;var optionType = o.optionB == null || o.optionB == undefined ? '' : o.optionB;options.push({　　　　　　　　　　//获取select2个必要的字段，id与textid: optionType + "" + "+" + optionName,text: optionType + "" + "+" + optionName});});return {results: options        //返回数据};},cache: true},templateResult: formatRepo,templateSelection: formatSelectB
});

html代码如下:

   <select class="form-control " id="A" required></select>

如果直接回显，没这么麻烦，删掉引用的这俩就ok

以上over，欢迎补充。

select2回显操作相关推荐

java select下拉标签_java中下拉框select和单选按钮的回显操作
前提: 1.下拉框select 请选择部门 selected="selected" >${department.department} 2.单选按钮radio的回显 chec ...
elementUI checkbox选中回显操作注意事项
具体的详情介绍请看,elementUI checkbox. checkbox的回显操作是基于 el-checkbox-group 标签v-module绑定的数组来实现回显,这个数组可以是一维数组,也可 ...
java中下拉框select和单选按钮的回显操作
1.下拉框select的回显 <select name="departmentId" id="departmentId"><option va ...
通过jquery回显操作(笔记)
123
腾讯地图实现站点标记，及已标记的点回显在地图上
创建map实例参考官方文档:https://lbs.qq.com/webApi/javascriptGL/glGuide/glBasic 按照基础入门的使用步骤,你可以得到一张地图: //初始化地图 ...
多选框向后台传值，多选框的回显，对多选框的各种操作
1.多选框的回显: js:$( function(){ var checkBoxAll =$("input[name^='checkbox_']");//获取前缀为 ...
EasyUI加zTree使用解析 easyui修改操作的表单回显方法验证框提交表单前验证 datagrid的load方法
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{code: '01',name: 'name01' }); easyui修改操作的回显方法 ...
EasyUI加zTree使用解析 easyui修改操作的表单回显方法验证框提交表单前验证 datagrid的load方法...
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{code: '01',name: 'name01' }); easyui修改操作的回显方法 ...
SSM框架下对信息执行修改操作时的信息弹窗回显以及对信息修改后对数据库的更新问题
SSM框架下对信息执行修改操作时的信息弹窗回显以及对信息修改后的同步问题概括主要说一下前端的实现概括今天在做实训作业时,有个对数据信息进行修改的操作,要求点击修改按钮后弹出修改框,栏目中需要显 ...

select2回显操作

select2回显操作相关推荐

最新文章

热门文章