当前位置:编程学习 > JS >>

JS下拉列表交换数据,互相选择代码

JS下拉列表交换数据,互相选择代码,可将左侧的数据移动到右边,右边的数据交换到左边,在一些招聘网站,经常看到的效果。
答案:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉列表交换数据</title>
</head>
<body>
<table border=0 cellpadding=5 cellspacing=0 align=center>
<form action='' method=post name=myform>
<tr align=center><td>&nbsp;</td>
<td></td><td>&nbsp;</td>
<td></td></tr>
<tr align=center>
<td>
<select name='d_b1' id='d_b1' size=20 style='width:200px' ondblclick='Add()'>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
<td><input type=button name=b1 value=' → ' onclick='Add()'><br><br><input type=button name=b1 value=' ← ' onclick='Del()'></td>
<td>
<select name='d_b2' id="d_b2" size=20 style='width:200px' ondblclick='Del()'>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
<td>&nbsp;</td>
</tr>
<tr><td colspan=4 align=right></td></tr>
</form></table>
<script>
var x=document.getElementById('d_b1')
var y=document.getElementById('d_b2')
function Add(){
	 for(var i=0;x[i];i++){
		 x[i].selected==true&&y.appendChild(x[i])
			 }	}
function Del(){
	 for(var i=0;y[i];i++){
		y[i].selected==true&&x.appendChild(y[i])
			 }	}
</script>
</body>
</html>

上一个:jQuery.HCheckbox 单选框、复选框表单美化
下一个:DOM方式的表单注册协议复选框勾选判断

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,