下面的例子为一个双击下拉框内容移动效果的demo
<!DOCTYPE html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="jquery-1.4.2.min.js" type="text/javascript"></script><link href="reset.css" type="text/css" rel="stylesheet" /><script language="javascript">$(function (){ //双击向右移动 $("#select1").dblclick(function(){ $("#select1 option:selected").appendTo("#select2"); }) //双击向左移动 $("#select2").dblclick(function(){ $("#select2 option:selected").appendTo("#select1"); }) //全部向右 $("#moveallright").click(function(){ $("#select1 option").appendTo("#select2"); }) //全部向左 $("#moveallleft").click(function(){ $("#select2 option").appendTo("#select1"); }) //选中的向右 $("#moveright").click(function(){ $("#select1 option:selected").appendTo("#select2"); }) //选中的向左 $("#moveleft").click(function(){ $("#select2 option:selected").appendTo("#select1"); }) });</script><style>*{ font-size:18px;}select{ width:116px;}.div1{ width:400px; float:left; text-align:right;}.div2{ width:400px; float:left; text-align:left; margin-left:50px;}select,button{ border:1px solid #CCC}</style><title>双击下拉框内容移动</title></head><body><div class="div1"> <select id="select1" multiple="multiple" size="10"> <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> </select> <br /> <button id="moveright">向右移动>></button><br /> <button id="moveallright">全部向右>></button><br /></div><div class="div2"> <select id="select2" multiple="multiple" size="10"> <option value="9">选项九</option> </select> <br /> <button id="moveleft"><<向左移动</button><br /> <button id="moveallleft"><<全部向左</button><br /></div></body></html>
随时随地看视频
