本文主要是介绍jQuery实现两个下拉菜单的选项互相移动效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
jQuery实现两个下拉菜单的选项互相移动效果
<!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>
<script language="javascript" type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script>
$(function (){
$("#btn_right_one").click(function(){
$("#rightSelect").append($("#leftSelect option:selected"));
});
$("#btn_right_all").click(function(){
$("#rightSelect").append($("#leftSelect option"));
});
$("#btn_left_one").click(function(){
$("#leftSelect").append($("#rightSelect option:selected"));
});
$("#btn_left_all").click(function(){
$("#leftSelect").append($("#rightSelect option"));
});
});
</script>
</head>
<body>
<table width="300" border="1">
<tr>
<td align="center">
<select id="leftSelect" multiple="multiple" size="10" style="width:110px;">
<option value="选项1">选项1</option>
<option value="选项3">选项3</option>
<option value="选项5">选项5</option>
<option value="选项7">选项7</option>
<option value="选项9">选项9</option>
</select>
</td>
<td align="center">
<input type="button" id="btn_right_one" value="-->" />
<input type="button" id="btn_right_all" value=" >>" />
<input type="button" id="btn_left_one" value="<--" />
<input type="button" id="btn_left_all" value=" <<" />
</td>
<td align="center">
<select id="rightSelect" multiple="multiple" size="10" style="width:110px;">
<option value="选项2">选项2</option>
<option value="选项4">选项4</option>
<option value="选项6">选项6</option>
<option value="选项8">选项8</option>
<option value="选项10">选项10</option>
</select></td>
</tr>
</table>
<input type="button" id="butn0" value="获取左侧值">
<input type="button" id="butn1" value="获取右侧值">
</body>
</html>
这篇关于jQuery实现两个下拉菜单的选项互相移动效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
