JavaScript ListBox 操作示例

在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中添加此代码:

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485