记一次HTML->select->option大量数据加载优化

1、问题：当左侧选项过多时，初始化加载缓慢、左右移动缓慢。

2、问题原因分析：

（1）、初始化加载过程原有实现，具体实现如下图

缓慢原因：频繁进行new Option()、add 操作;

selectOption = new Option(itemNames[i], itemNames[i], false, false);
selectOption.title = itemNames[i];
list.options.add(selectOption);

改进方法：遍历选项时，拼接字符串->拼接完成一次性添加到select内。

var myOptions="";
	for (i = 0; i < j; i++) {
		if(itemNames[i].endWith("_HA")){
			continue;
		}
		myOptions+='<option title="'+itemNames[i]+'"     
        value="'+itemNames[i]+'">'+itemNames[i]+'</option>';
	}
	
	$("#"+list.id+"").append(myOptions);

（2）、移动选中项缓慢，具体实现如下图

缓慢原因：逐个遍历获得选中项，在插入目标select时排序

j = e1.options.length;
	for (i = 0; i < j; i++) {
		var selectedFlag = e1.options[i].selected;
		if (selectedFlag === true) {
			insertOption(e1.options[i], e2);//排序
			j--;
			i--;
		}
	}

改进方法：

a:批量获得选中项；

b:借助（1）方案批量移动选中项；

c:取消选中项->选中项置空；

d:实际删除选中项；

其中步骤c给用户成功删除选中项感觉，d才是真正删除选中项。

具体代码如下：

var tmpE1=$('#'+e1.name+'');
	var tmpE2=$('#'+e2.name+'');
	var selectedOptions=tmpE1.find('option:selected');
	var seletedLength=selectedOptions.length;// 选中
	
	var i;
	var myMovedOptions="";
	for(i=0;i<seletedLength;++i){ 
		var tmpValue=selectedOptions[i].value;
		var tmpOption='<option title="'+tmpValue+'" value="'+
		tmpValue+'">'+tmpValue+'</option>';
		
		myMovedOptions+=tmpOption;
	}
	
	// 添加到目标区域
	tmpE2.append(myMovedOptions);
	
	// 清空之前选中
	selectedOptions.removeAttr("selected");
	selectedOptions.text("");//伪删除
	selectedOptions.remove();//实际删除

记一次HTML->select->option大量数据加载优化

猜你喜欢