<!DOCTYPE html>
<html>
<head>
<title>moveOption.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
//声明全局变量
var loptionDom; //左边的select对应的Dom对象
var roptionDom; //右边的select对应的DOM对象
//窗体加载完毕 获取dom对象
window.onload = function() {
//获取左边的select对应的Dom对象
loptionDom = document.getElementById("loption");
//获取右边的select对应的DOM对象
roptionDom = document.getElementById("roption");
};
//向右移动
function moveRight(value) {
//获取左边select所有的option集合对象
var options = loptionDom.options;
//判断是否是单个移动
if (value == 1) {
//记住要移动的option对象
var remberoptionDom = null;
//记住要移动的option的数量
var count = 0;
//遍历options集合对象
for (var i = 0; i < options.length; i++) {
//获取option对象
var optionDom = options[i];
//判断是否是选中的option对象selected="selected"
if (optionDom.selected) {
//赋值
remberoptionDom = optionDom;
//数量递增
count++;
}
}
//判断数量是否是1 如果是1代表移动一个
if (count == 1) {
//添加到了右边
roptionDom.appendChild(remberoptionDom);
//左边要移除
loptionDom.removeChild(remberoptionDom);
} else if (count == 0) {
alert("请选择要移动的数据");
} else {
alert("请选择==>移动");
}
} else if (value == 0) {
//遍历操作 为啥 一定要写成 i=options.length-1 ; i>=0;i--
for (var i = options.length - 1; i >= 0; i--) {
//获取option对象
var optionDom = options[i]; //options[0] //8
//判断是否被选中
if (optionDom.selected) {
//左边要移除
loptionDom.removeChild(optionDom);
//添加到了右边
roptionDom.appendChild(optionDom);
}
}
}
}
//向左移动
function moveLeft(value) {
if (value == 1) {
} else if (value == 0) {
}
}
</script>
</head>
<body>
<!-- 左右移动的整个代码 -->
<div style="width: 400px; height: 280px;margin: 0px auto;">
<!-- 左边的代码 -->
<div style="width: 100px; float:left;">
<select multiple="multiple" style="height: 200px; width: 80px;"
id="loption">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
<option>选项7</option>
<option>选项8</option>
<option>选项9</option>
</select>
</div>
<!-- 中间代码 -->
<div style="width: 100px;float: left;margin-right: 30px;">
<ul style="list-style: none;">
<li><input type="button" value="-->"
style="width: 40px; margin-bottom: 15px;" onclick="moveRight(1)" />
<input type="button" value="==>"
style="width: 40px;margin-bottom: 15px;" onclick="moveRight(0)" />
<input type="button" value="<--"
style="width: 40px;margin-bottom: 15px;" onclick="moveLeft(1)" /> <input
type="button" value="<==" style="width: 40px;margin-bottom: 15px;"
onclick="moveLeft(0)" /></li>
</ul>
</div>
<!-- 右边代码 -->
<div style="width: 100px; float: left; ">
<select multiple="multiple" style="height: 200px; width: 80px;"
id="roption"></select>
</div>
</div>
</body>
</html>
效果：
