jquery实现下拉框功能
2016-05-06 10:35
633 查看
说不清楚,直接上图
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta 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> <script src="jquery-1.3.2.min.js"></script> <script> $(function () { $("#add").click(function () {//单个添加 var $options = $("#select1 option:selected"); $options.appendTo("#select2"); }); $("#add_all").click(function () {//全部添加 $("#select1 option").each(function () { $(this).appendTo("#select2"); /* 也可以写为: var p=$("#select1 option"); p.appendTo("#select2"); */ }); }); $("#remove").click(function () {//同上,只不过方向相反 var $options = $("#select2 option:selected"); // var $remove = $options.remove(); $options.appendTo("#select1"); }); $("#remove_all").click(function () {//同上,只不过方向相反 var p = $("#select2 option"); p.appendTo("#select1"); }); }); </script> </head> <body> <div class="centent"> <select 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> </select> <div> <span id="add">选中添加到右边>></span> <span id="add_all">全部添加到右边>;></span> </div> </div> <div class="centent"> <select multiple id="select2" style="width:100px;height:160px"></select> <div> <span id="remove"><<选中删除到左边</span> <span id="remove_all"><<全部删除到左边</span> </div> </div> </body> </html>
相关文章推荐
- jQuerymobile 开发环境搭建
- jquery.validate.js 在ie8下的兼容性解决方案
- PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
- Jquery的attr方法实现checkbox的选中状态所带来的问题解析
- 给初学者的总结:jquery选择器
- 基于jquery实现即时检查格式是否正确的表单
- seajs模块化jQuery与jQuery插件
- 利用jquery来进行表单的多向提交
- JQuery中$.ajax()方法参数详解
- JQuery中$.ajax()方法参数详解
- PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
- 基于jquery实现即时检查格式是否正确的表单
- jQuery 实现评论等级好评差评特效
- jQuery侧边栏实现代码
- jquery自定义插件开发之window的实现过程
- jquery自定义插件――window的实现【示例代码】
- Jquery之实现全选反选功能
- jquery.tmpl.js使用外部 jQuery Template文件
- 高效Web开发的10个jQuery代码片段
- 初探jquery之强大丰富的选择器