<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>addMulitOptions.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
// 移动id为from的列表中的选中项到id为to的列表中
function move(from,to) {
// 获取移动源
var fromBox = document.getElementById(from);
// 获取移动目的地
var toBox = document.getElementById(to);
// 当移动源存在选中项时
while(fromBox.selectedIndex != -1){
// 将移动源中的选中项添加到移动目的地的末尾
toBox.appendChild(fromBox.options[fromBox.selectedIndex]);
}
}
// 移动id为from的列表中的所有项到id为to的列表中
function moveAll(from,to) {
// 获取移动源
var fromBox = document.getElementById(from);
// 获取移动目的地
var toBox = document.getElementById(to);
// 当移动源存在选中项时
while(fromBox.options.length > 0){
// 将移动源中的选中项添加到移动目的地的末尾
toBox.appendChild(fromBox.options[0]);
}
}
</script>
</head>
<body>
<select id="leftBox" multiple="multiple" style="height: 200px; width: 100px;">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">d</option>
</select>
<input type="button" value=">" οnclick="move('leftBox','rightBox')"/>
<input type="button" value="<" οnclick="move('rightBox','leftBox')"/>
<input type="button" value=">>" οnclick="moveAll('leftBox','rightBox')"/>
<input type="button" value="<<" οnclick="moveAll('rightBox','leftBox')"/>
<select id="rightBox" multiple="multiple" style="height: 200px; width: 100px;">
<option value="11">A</option>
<option value="22">B</option>
<option value="33">C</option>
<option value="44">D</option>
</select>
</body>
</html>
JavaScript:两个可以互相交换数据的列表框
最新推荐文章于 2021-03-25 14:31:20 发布