对于下拉框的多选,之前做了一个完美版本,是通过blur事件来操作取消手动选项的,但是后来经过多方测试发现在IE上blur事件被多次触发,导致选项失控,不能达到理想的效果,而在火狐和谷歌上则没有该问题,没有找到具体的原因。故修正后做了这个版本。该版本的下拉框能够支持多选,手动输入时模糊查询 ,手动删除时自动删除选项。
var diseaseCategory = "";
var dataSoruce = ""; //下拉框加载的选项数据
var oldText = ""; //下拉框内容改变之前的文本
var flag = false; //先执行了onChange方法,再刷新面板
if(record.id=="2"){
diseaseCategory = "chronicdisCategory";
}else if(record.id=="1"){
diseaseCategory = "diseaseCategory";
}
var diseaseList = []; //下拉框选中的值的集合
$CommonUI.getComboBox("#diseasecbb").combobox({
url:$WEB_ROOT_PATH+'/basecode/baseCodeCtrl.htm?BLHMI=findBaseCode&dto.baseCode.codeSystem='+diseaseCategory,
valueField:'id',
textField:'text',
multiple:true,
required:true,
editable:true,
filter:function(q,row){//模糊过滤
var opts = $(this).combobox('options');
var newTextList = q.split(",");
var newText = newTextList[newTextList.length-1];
return row[opts.textField].indexOf(newText) >-1;
},onSelect:function(row){
$("#diseasecbb").next().children(":text").removeClass("placeholder");
for(i in diseaseList){//当已经选择了该选项的时候不再添加选值
if(diseaseList[i] == row.id){
$("#diseasecbb").combobox("setValues",diseaseList);
$("#diseasecbb").combobox("loadData",dataSoruce);
return;
}
}
diseaseList.push(row.id);
$("#diseasecbb").combobox("setValues",diseaseList);
$("#diseasecbb").combobox("loadData",dataSoruce);
oldText = $("#diseasecbb").combobox("getText");
},onUnselect:function(row){
for(i in diseaseList){
if(diseaseList[i] == row.id){
diseaseList.splice(i,1);
}
}
oldText = $("#diseasecbb").combobox("getText");//这里必须放在加载数据之前,否则不能获取到当前文本
$("#diseasecbb").combobox("setValues",diseaseList);
$("#diseasecbb").combobox("loadData",dataSoruce);
},onLoadSuccess:function(){
dataSoruce=$CommonUI.getComboBox('#diseasecbb').combobox('getData');
$("#diseasecbb").next().children(":text").attr("placeholder","英文逗号分隔选项");
placeholderIE();//IE上提示显示,具体方法请网上查找
},onChange:function(newValue,oldValue){//该事件主要用于操作手动删除选项
var newText = $("#diseasecbb").combobox("getText");
if(newText.length>=oldText.length){
return;//添加选项时通过点击选项实现
}else{
flag = true;
var newTextList = newText.split(",");
var oldTextList = oldText.split(",");
for(i in newTextList){
for(j in oldTextList){
if(newTextList[i] == oldTextList[j]){
oldTextList.splice(j,1);
break;
}
}
}
var newList = oldTextList;
var newCodeList =[];
for(i in newList){
$.ajax({//该请求用于将选项的文本内容转换为代码值
type:'post',
async:false,
dataType:'json',
url:$WEB_ROOT_PATH+'/basecode/baseCodeCtrl.htm?BLHMI=
findBaseCodeByDiseaseName',
data:{'dto.baseCode.codeSystem':diseaseCategory,'dto.baseCode.
displayName':newList[i]},
success:function(code){
if(code != null){
$("#diseasecbb").combobox("unselect",code);
}
}
});
}
}
},onShowPanel:function(){//该事件主要用于手动删除事件后选中剩下的选项
if(flag){
$("#diseasecbb").combobox("setValues",diseaseList);
$("#diseasecbb").combobox("loadData",dataSoruce);
flag = false;
}
}
});