1.使用HTML DOM实现
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
select {
width: 100px;
height: 200px;
border: 1px solid #ddd;
float: left;
}
div {
width: 100px;
height: 200xp;
float: left;
text-align: center;
padding-top: 50px;
}
</style>
</head>
<body>
<select id="sid1" size="10" multiple>
<option value="0">邓丽君</option>
<option value="1">张国荣</option>
<option value="2">梅艳芳</option>
<option value="3">黄家驹</option>
<option value="4">迈克尔.杰克逊</option>
<option value="5">姚贝娜</option>
<option value="6">张雨生</option>
</select>
<div>
<button onclick="doMove('sid1','sid2')">>></button>
<br /><br /><br /><br />
<button onclick="doMove('sid2','sid1')"><<</button>
</div>
<select id="sid2" size="10" multiple>
</select>
<script type="text/javascript">
function doMove(d1, d2) {
//获取对应的下拉框
var select1 = document.getElementById(d1);
var select2 = document.getElementById(d2);
//获取第一个下拉框中的所有下拉项
var list = select1.options;
//遍历并判断
for(var i = 0; i < list.length; i++) {
//判断是否选择
if(list[i].selected) {
list[i].selected = false; //取消选中
//使用HTML DOM
var ob = list[i];
select1.remove(i);
select2.add(ob);
i--;
}
}
}
</script>
</body>
</html>2.使用XML DOM 实现
<html>
<head>
<meta charset="utf-8"/>
<title>JavaScript实例</title>
<style>
select{width:100px;height:200px;border:1px solid #ddd;float:left;}
div{width:100px;height:200px;float:left;text-align:center;padding-top:50px;}
</style>
</head>
<body>
<!-- 注释 -->
<h2>JavaScript实例：XML DOM中的Select对象</h2>
<select id="sid1" size="10" multiple>
<option value="0">邓丽君</option>
<option value="1">张国荣</option>
<option value="2">梅艳芳</option>
<option value="3">黄家驹</option>
<option value="4">迈克尔.杰克逊</option>
<option value="5">姚贝娜</option>
<option value="6">张雨生</option>
</select>
<div>
<button onclick="doMove('sid1','sid2')">>></button>
<br/><br/><br/><br/>
<button onclick="doMove('sid2','sid1')"><<</button>
</div>
<select id="sid2" size="10" multiple></select>
<script type="text/javascript">
//执行下拉项的移动操作
function doMove(d1,d2){
var sd1 = document.getElementById(d1);
var sd2 = document.getElementById(d2);
var list = sd1.getElementsByTagName("option");
for(var i=0;i<list.length;i++){
if(list[i].selected){
list[i].selected = false;
sd2.appendChild(list[i]);
i--;
}
}
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
