您的位置：首页 > Web前端 > JQuery

jQuery实现两个下拉菜单的选项互相移动效果

2013-11-09 16:05 447 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航