<!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="../../include/jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
//为添加按钮增加事件
$("#leftbtn").click(function (){
//获取选择的值
$("#leftop option:selected").each(function (i){
//在右边添加所选值,并且添加之后在左边删除所选值
$("#rightop").append("<option>"+this.text+"</option>");
}).remove();
});
//为删除按钮增加事件
$("#rightbtn").click(function (){
//获取所选择的值
$("#rightop option:selected").each(function (i){
//在左边添加所选值,并且添加之后在右边删除所选值
$("#leftop").append("<option>"+this.text+"</option>");
}).remove();
});
//增加删除按钮事件
$("#del").click(function (){
//获取要删除的值
$("#rightop option:selected,#leftop option:selected").each(function (i){
//删除所选值
$(this).remove();
});
});
});
</script>
</head>
<body>
<table width="387" height="283" border="0">
<tr>
<td height="21" colspan="4"> </td>
</tr>
<tr>
<td width="72" rowspan="7">
<select id="leftop" multiple="multiple" size="12" style="width:150px; height:180px;">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">保定</option>
<option value="4">辽宁</option>
<option value="5">天津</option>
<option value="6">云南</option>
<option value="7">广东</option>
<option value="8">山东</option>
<option value="9">河南</option>
<option value="10">山西</option>
</select>
</td>
<td width="70" height="21"> </td>
<td colspan="2" rowspan="7">
<select id="rightop" multiple="multiple" size="12" style="width:150px; height:180px;">
</select>
</td>
</tr>
<tr>
<td height="36" align="center" valign="middle"><input id="leftbtn" type="button" value=">>"/></td>
</tr>
<tr>
<td height="27" align="center"> </td>
</tr>
<tr>
<td height="38" align="center" valign="middle"><input id="del" type="button" value="删除"/></td>
</tr>
<tr>
<td height="37" align="center" valign="middle"> </td>
</tr>
<tr>
<td height="34" align="center" valign="middle"><input id="rightbtn" type="button" value="<<"/></td>
</tr>
<tr>
<td height="21" align="center" valign="middle"> </td>
</tr>
<tr>
<td height="21" colspan="4"> </td>
</tr>
</table>
</body>
</html>
jQuery实现选项内容的左右移动效果
最新推荐文章于 2022-11-05 20:49:30 发布