场景:
通常检索出的下拉框值都需要再点一下才能选中。
1、当我们通过搜索框动态从后台数据库检查数据时,假如只返回一个值,那我们就自动选中该值;
2、自动选择指定值;
实现方法(如何引入select2等常规操作忽略):
select2本身有自动选中的功能,但在js中不能直接设置,只能通过<select>标签变向实现,代码如下,看红色加粗部分
$('#selectId').select2({
multiple:false,
allowClear: true, //选中项可按下Backspace键清空
placeholder: '请选择...',
ajax: {
type:'post',
url: url,
dataType: 'json',
contentType: "application/json",
//delay: 250,
data: function (params) {
return JSON.stringify({
keyword: params.term // search term 请求参数 , 请求框中输入的参数
});
},
processResults: function (result, params) {
var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候,可以使用类似此方法创建新的数组对象
var datas = result.data;
for(var i in datas){
var tex = datas[i].platNo + '('+datas[i].clientNam+')';
itemList.push({id: datas[i].platNo, text: tex})
}
if(datas.length == 1){//如果结果集只有一条
var val = datas[0].id;
var tex = datas[0].id+ '('+datas[i].name+')';
//在select元素下增加该值就会默认选择了
$('#selectId').empty().append('<option value="'+val+'">'+tex+'</option>');
$('#selectId').select2('close');//关闭搜索框
}
return {
results: itemList
};
},
cache: true
},
minimumInputLength: 1,
language: "zh-CN"
});