左右select选择 (jQuery实现)
2016-07-19 10:51
821 查看
<!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> <style type="text/css"> * { margin: 0; padding: 0; } div.centent { float: left; text-align: center; margin: 10px; } span { display: block; margin: 2px 2px; padding: 4px 10px; background: #898989; cursor: pointer; font-size: 12px; color: white; } </style> <!-- 引入jQuery --> <script src="../scripts/jquery-1.8.3.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#add").click(function(){ //选中添加到右边 $("#select1 option:selected").appendTo($("#select2")); }); //全部添加到右边 $("#add_all").click(function(){ $("#select1 option").appendTo($("#select2")); }); //双击添加到右边 有无this的区别是到右边是顺着还是倒着的 $("#select1").dblclick(function(){ $("option:selected",this).appendTo($("#select2")); }); }); </script> </head> <body> <div class="centent"> <select multiple="multiple" id="select1" style="width: 100px; height: 160px;"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> <option value="6">选项6</option> <option value="7">选项7</option> </select> <div> <span id="add">选中添加到右边>></span> <span id="add_all">全部添加到右边>></span> </div> </div> <div class="centent"> <select multiple="multiple" id="select2" style="width: 100px; height: 160px;"> <option value="8">选项8</option> </select> <div> <span id="remove"><<选中删除到左边</span> <span id="remove_all"><<全部删除到左边</span> </div> </div> </body> </html>
相关文章推荐
- jquery实现div拖拽宽度示例代码
- jQuery小技巧
- jQuery小技巧
- jQuery中ready与load事件
- jQuery EasyUI提交表单验证
- 使用 jquery.qrcode.js生成二维码
- jquery操作HTML属性和控件
- 使用jQuery获取父页面元素及子页面元素的方法
- jQuery Validate 表单验证
- jQuery 帮助文档
- JavaScript && jQuery获取radio/下拉框的选中值
- jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
- jquery判断元素是否出现在可视区
- jquery中的绑定事件和合成事件
- jquery ajax
- jquery父子隶属关系
- 【js与jquery】订单提交页发送短信功能
- jQuery——总结
- Python全栈开发之16、jquery
- jquery插件开发