本文介绍了一种使用JavaScript实现两个列表框之间数据左右交换的方法。通过遍历源列表框的选项，判断选中状态后创建新选项并添加到目标列表框，同时从源列表框移除已选项目。代码兼容标准DOM及IE浏览器，支持一次性移动所有选中项，适用于常见的前端交互场景。
JavaScript列表框数据交换实现
本文详细介绍了一种利用JavaScript实现两个列表框（listbox）之间数据左右交换的技术方案，供开发者参考借鉴。
该功能在实际应用中十分常见，主要用于将左侧列表框中的元素移动至右侧，或将右侧元素移回左侧，且支持一次性批量移动所有选中项。
核心实现代码如下：
function listbox_moveacross(sourceID, destID) {
var src = document.getElementById(sourceID);
var dest = document.getElementById(destID);
for(var count=0; count < src.options.length; count++) {
if(src.options[count].selected == true) {
var option = src.options[count];
var newOption = document.createElement("option");
newOption.value = option.value;
newOption.text = option.text;
newOption.selected = true;
try {
dest.add(newOption, null); //Standard
src.remove(count, null);
}catch(error) {
dest.add(newOption); // IE only
src.remove(count);
}
count--;
}
}
}
//..
listbox_moveacross('countryList', 'selectedCountryList');以下是类似的演示效果代码，可直接在浏览器环境中执行测试。
具体HTML结构代码如下：
Click below buttons to move selected options right or left.<br>
<table>
<tbody><tr>
<td>
<select id="sourceSelect" size="10" multiple="">
<option value="a">Afghanistan</option>
<option value="b">Bahamas</option>
<option value="c">Barbados</option>
<option value="d">Belgium</option>
<option value="e">Bhutan</option>
<option value="f">China</option>
<option value="g">Croatia</option>
<option value="h">Denmark</option>
<option value="i">France</option>
</select>
</td>
<td>
<button onclick="listboxMoveacross('sourceSelect', 'destSelect');">>></button> <br>
<button onclick="listboxMoveacross('destSelect', 'sourceSelect');"><<</button>
</td>
<td>
<select id="destSelect" size="10" multiple="">
<option value="a">Afghanistan</option>
<option value="b">Bahamas</option>
<option value="c">Barbados</option>
<option value="d">Belgium</option>
<option value="e">Bhutan</option>
<option value="f">China</option>
<option value="g">Croatia</option>
<option value="h">Denmark</option>
<option value="i">France</option>
</select>
</td>
</tr>
</tbody></table>
<script>
function listboxMoveacross(sourceID, destID) {
var src = document.getElementById(sourceID);
var dest = document.getElementById(destID);
for(var count=0; count < src.options.length; count++) {
if(src.options[count].selected == true) {
var option = src.options[count];
var newOption = document.createElement("option");
newOption.value = option.value;
newOption.text = option.text;
newOption.selected = true;
try {
dest.add(newOption, null); //Standard
src.remove(count, null);
}catch(error) {
dest.add(newOption); // IE only
src.remove(count);
}
count--;
}
}
}
</script>希望本文所述的JavaScript程序设计技巧能对各位读者有所帮助。