一段实现选择框javascript代码的重构-优快云博客

本文介绍了一个关于选择框代码的重构案例。通过对原始代码的优化，实现了更简洁且高效的双选择框功能，包括选项的转移及长度限制等。该文适合希望提高JavaScript编程技巧的开发者阅读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现两个选择框的代码,之前由于对js不熟,写的代码不够精练

重构之前(下面这段代码是我从别的代码重构过来的,那个代码代码简直就是垃圾,就不贴了):

/*
srcSelect: source select,
destSelect: destination select,
destMaxLength: max length of destination select
*/
function changeRelative(srcSelect, destSelect, destMaxLength){
for (var i=0; i<srcSelect.length; i++){

if(destMaxLength!=null && destSelect.length >= destMaxLength){
return;
}

var selectedOption = srcSelect.options[i];
if (selectedOption.selected == true){

destSelect.add(new Option(selectedOption.text, selectedOption.value));

srcSelect.remove(i);

//set selected item
if(i==srcSelect.length){//select first
srcSelect.selectedIndex=0;
}else{//select next
srcSelect.selectedIndex=i;
}

break;
}
}
}

重构之后

/*
srcSelect: source select,
destSelect: destination select,
destMaxLength: max length of destination select
*/
function changeRelative(srcSelect, destSelect, destMaxLength){
if(destMaxLength!=null && destSelect.length >= destMaxLength){
return;
}

var srcSelectedIndex = srcSelect.selectedIndex;
if(srcSelectedIndex != -1){
var srcSelectedOption = srcSelect.options[srcSelectedIndex];
destSelect.add(new Option(srcSelectedOption.text, srcSelectedOption.value));

srcSelect.remove(srcSelectedIndex);

//set next selected item
if(srcSelectedIndex == srcSelect.length){//select first option
srcSelect.selectedIndex=0;
}else{//select next option
srcSelect.selectedIndex=srcSelectedIndex;
}
}
}