jQuery-EasyUI下拉框多选终极版

对于下拉框的多选,之前做了一个完美版本,是通过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;
        	}
        }
});





评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值