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();//实际删除