本文介绍了一个简单的HTML页面，该页面使用JavaScript实现选项在两个选择框之间的移动功能。通过点击按钮，用户可以将选项从源选择框移至目标选择框，反之亦然。此示例展示了基本的DOM操作及事件处理。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
function moveRight() {
var sourceSelect = document.getElementById("sourceSelect");
var targetSelect = document.getElementById("targetSelect");
while(sourceSelect.options.selectedIndex != -1){
targetSelect.options.add(sourceSelect.options.item(sourceSelect.selectedIndex));
}
}
function moveLeft() {
var sourceSelect = document.getElementById("targetSelect");
var targetSelect = document.getElementById("sourceSelect");
while(sourceSelect.options.selectedIndex != -1){
targetSelect.options.add(sourceSelect.options.item(sourceSelect.selectedIndex));
}
}
</script>
</head>
<body>
<select id="sourceSelect" multiple >
<option value="1">aaa</option>
<option value="2">bbb</option>
<option value="3">ccc</option>
<option value="4">ddd</option>
<option value="5">eee</option>
<option value="6">fff</option>
</select>
<a onclick="moveRight();"> >> </a>
<a onclick="moveLeft();"> << </a>
<select id="targetSelect" multiple>
</select>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
function moveRight() {
var sourceSelect = document.getElementById("sourceSelect");
var targetSelect = document.getElementById("targetSelect");
while(sourceSelect.options.selectedIndex != -1){
targetSelect.options.add(sourceSelect.options.item(sourceSelect.selectedIndex));
}
}
function moveLeft() {
var sourceSelect = document.getElementById("targetSelect");
var targetSelect = document.getElementById("sourceSelect");
while(sourceSelect.options.selectedIndex != -1){
targetSelect.options.add(sourceSelect.options.item(sourceSelect.selectedIndex));
}
}
</script>
</head>
<body>
<select id="sourceSelect" multiple >
<option value="1">aaa</option>
<option value="2">bbb</option>
<option value="3">ccc</option>
<option value="4">ddd</option>
<option value="5">eee</option>
<option value="6">fff</option>
</select>
<a onclick="moveRight();"> >> </a>
<a onclick="moveLeft();"> << </a>
<select id="targetSelect" multiple>
</select>
</body>
</html>
扫一扫
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
