双选列表 双下拉列表 双select列表 jquery
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>双下拉多选列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
//选择功能
function tianjiafn(){
$("#set1 option:selected").each(function(){
$("#set2").append("<option value='"+$(this).attr("value")+"'>"+$(this).text()+"</option>");
});
$("#set1 option:selected").remove();
}
//移除功能
function yichufn(){
$("#set2 option:selected").each(function(){
$("#set1").prepend("<option value='"+$(this).attr("value")+"'>"+$(this).text()+"</option>");
});
$("#set2 option:selected").remove();}
//添加全部
function tjqbfn(){
$("#set1 option").each(function(){
$("#set2").append("<option value='"+$(this).attr("value")+"'>"+$(this).text()+"</option>");
});
$("#set1 option").remove();
}
//移除全部
function ycqbfn(){
$("#set2 option").each(function(){
$("#set1").append("<option value='"+$(this).attr("value")+"'>"+$(this).text()+"</option>");
});
$("#set2 option").remove();
}
//测试确定
function csqd(){
var tmp='';
$("#set2 option").each(function(){tmp+=$(this).text()+$(this).val()+"\n";});
alert(tmp);
}
//加载事件
$(function(){
//选择按钮事件、左边双击事件
$("#xuanze").bind("click",tianjiafn);
$("#set1").bind("dblclick",tianjiafn);
//移除按钮事件、右边双击事件
$("#yichu").bind("click",yichufn);
$("#set2").bind("dblclick",yichufn);
//添加全部
$("#tjqb").bind("click",tjqbfn);
//删除全部
$("#ycqb").bind("click",ycqbfn);
});
</script>
</head>
<body style="text-align: center;margin:0px;padding:0px;">
<form id="myForm" name="myForm">
<table border="1" align="center">
<tr>
<td>
<select id="set1" multiple="multiple" style="height: 200px; width: 200px;"
size="10">
<option value="1" selected type=button value='选择'/>
</td>
</tr>
<tr>
<td><input id="yichu" name="button32" type=button value='移除'/></td>
</tr>
<tr>
<td><input id="tjqb" type=button value='添加全部'/></td>
</tr>
<tr>
<td><input id="ycqb" type=button value='移除全部'/></td>
</tr>
</table>
</td>
<td>
<select id="set2" style="height: 200px; width:200px;" size="10"
name="courseIds" multiple="multiple">
</select>
</td>
</tr>
</table>
<br />
<input type="button" value="确定" onclick="csqd();" />
<input type="button" value="重选" onClick="$('#ycqb').click()"/>
</form>
</body>
</html>
