您的位置：首页 > Web前端 > JavaScript

JavaScript--点击按钮实现选中选项移动到指定位置（下拉框）或全部选项移动

2015-08-20 22:41 776 查看

功能实现：

现有4个按钮：向左，向右，全向左，全向右。点击按钮实现所对应功能，将选中选项移动

完整代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
select {
width: 100px;
height: 200px;
}
</style>
</head>
<body>
<select size="8">
<option>刘备</option>
<option>张飞</option>
<option>关羽</option>
<option>赵云</option>
<option>马超</option>
</select>
<input type="button" value=">" onclick="moveSingle(0)" />
<input type="button" value=">>" onclick="moveAll(0)" />
<input type="button" value="<" onclick="moveSingle(1)" />
<input type="button" value="<<" onclick="moveAll(1)" />
<select size="8">

</select>
</body>
<script type="text/javascript">
function moveSingle(position) {
var rightOpt = document.getElementsByTagName("select")[position].options[document.getElementsByTagName("select")[position].selectedIndex];
document.getElementsByTagName("select")[position === 0 ? 1 : 0].appendChild(rightOpt);
}
function moveAll(position) {
var len = document.getElementsByTagName("select")[position].options.length;
for (var i = 0; i < len; i++) {
document.getElementsByTagName("select")[position === 0 ? 1 : 0].appendChild(document.getElementsByTagName("select")[position].options[0]);
}
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航