在Web开发中,经常需要对列表框(ListBox)进行操作,比如从一个ListBox移动项目到另一个ListBox。本文将介绍如何使用JavaScript实现这一功能。
本示例代码适用于任何Web应用程序中的JavaScript部分。
假设按钮的名称为btnMoveRight和btnMoveLeft,ListBox的名称为ListBox1和ListBox2。
function fnMoveItems(lstbxFrom, lstbxTo) {
var varFromBox = document.all(lstbxFrom);
var varToBox = document.all(lstbxTo);
if ((varFromBox != null) && (varToBox != null)) {
if (varFromBox.length < 1) {
alert('源ListBox中没有项目');
return false;
}
if (varFromBox.options.selectedIndex == -1) {
alert('请选择要移动的项目');
return false;
}
while (varFromBox.options.selectedIndex >= 0) {
var newOption = new Option();
newOption.text = varFromBox.options[varFromBox.options.selectedIndex].text;
newOption.value = varFromBox.options[varFromBox.options.selectedIndex].value;
varToBox.options[varToBox.length] = newOption;
varFromBox.remove(varFromBox.options.selectedIndex);
}
}
return false;
}
有2种方法可以调用这个JavaScript代码:
1. 在页面加载时添加此代码:
btnMoveRight.Attributes.Add("onclick", "return fnMoveItems('ListBox1','ListBox2')");
btnMoveLeft.Attributes.Add("onclick", "return fnMoveItems('ListBox2','ListBox1')");
2. 在HTML中添加此代码: