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="../../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>


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值