jquery 下拉框左右选择
jQuery 选择 左右 下拉框
2023-09-11 14:22:19 时间
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>下拉框左右选择</title> <link rel="stylesheet" href="css/test.css" /> <script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script> <script type="text/javascript" src="js/teat.js" ></script> </head> <body> <div class="content"> <select multiple="multiple" id="select1"> <option value="1">篮球</option> <option value="2">网球</option> <option value="3">棒球</option> <option value="4">足球</option> <option value="5">排球</option> </select> <span id="add">选中右移>></span> <span id="add_all">全部右移>></span> </div> <div class="content"> <select multiple="multiple" id="select2"> </select> <span id="remove"><<选中左移</span> <span id="remove_all"><<全部左移</span> </div> </body> </html>
css
* { padding:0; margin: 0; } body { padding:100px; font-size: 15px; font-family: "微软雅黑"; } select { width:100px; height: 200px; padding: 5px; } .content { float:left; text-align: center; padding-right: 15px; } span { font-family: "微软雅黑"; display:block; width:100px; background:#eee; cursor:pointer; border:1px solid #ccc; padding:5px 0; margin:5px 0; font-weight: bold; }
js
$(document).ready(function() { $("#add").click(function() { $("#select1 option:selected").appendTo("#select2"); }) $("#add_all").click(function(){ $("#select1 option").appendTo("#select2"); }); $("#remove").click(function() { $("#select2 option:selected").appendTo("#select1"); }); $("#remove_all").click(function() { $("#select2 option").appendTo("#select1"); }); $("#select1").dblclick(function(){ $("#select1 option:selected").appendTo("#select2"); }); $("#select2").dblclick(function(){ $("#select2 option:selected").appendTo("#select1"); }); })
效果:
2017-09-25 19:27:23
相关文章
- jQuery实时显示鼠标指针位置和键盘ASCII码
- jquery中事件委派代码分析以及jQuery中delegate和on的用法与区别详细解析
- [Web 前端 ] Jquery attr()方法 获取或修改 对象的属性值
- 使用jquery怎么选择有两个class的元素?
- jQuery动画与事件概念以及语法
- jquery formValidate demo 采用struts 异步方式检验用户名是否存在
- 使用jquery执行ajax
- jquery.fn.extend与jquery.extend用法与区别
- [Typescript] Type JQuery
- 电子签章盖章之jQuery插件jquery.zsign
- 前端-jQuery-操作标签-文档操作
- 前端-jQuery-选择标签-选择器和筛选器
- 电子签章盖章之jQuery插件jquery.zsign
- jQuery UI 实例 - 滑块(Slider)
- bootstrap jQuery Ztree异步载入数据,check选择&可加入、改动、删除节点
- jQuery漏洞
- 白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连续7-电话问卷调查
- python web py入门(65)- jQuery - 根据鼠标位置来选择不同的样式显示