简单实现jQuery级联菜单
2019/6/27 21:30:14
本文主要是介绍简单实现jQuery级联菜单,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文实例为大家分享了jQuery实现级联菜单的具体代码,供大家参考,具体内容如下
层叠样式表:
.button { border: 1px ridge #ffffff; line-height:18px; height: 20px; width: 45px; padding-top: 0px; background:#CBDAF7; color:#000000; font-size: 9pt; }
HTML正文:
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:280px; height:200px; background-color:#E6E6E6;"> <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;"> <tr> <td width="126"> <select name="first" size="10" multiple="multiple" class="td3" id="first"> <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> </select> </td> <td width="69" valign="middle"> <input name="add" id="add" type="button" class="button" value="-->" /> <input name="add_all" id="add_all" type="button" class="button" value="==>" /> <input name="remove" id="remove" type="button" class="button" value="<--" /> <input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> </td> <td width="127" align="left"> <select name="second" size="10" multiple="multiple" id="second"> <option value="选项6">选项6</option> </select> </td> </tr> </table>
Javascript操作代码:
$(document).ready(function(){ $("#add").click(function(){ $("#first option:selected").appendTo($("#second")); }); $("#add_all").click(function(){ $("#first option").appendTo($("#second")); }); $("#remove").click(function(){ $("#second option:selected").appendTo($("#first")); }); $("#remove_all").click(function(){ $("#second option").appendTo($("#first")); }); });
效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持找一找教程网。
这篇关于简单实现jQuery级联菜单的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28基于Python+Vue开发的口腔牙科预约管理系统
- 2024-09-28基于Python+Vue开发的酒店客房预订管理系统
- 2024-09-27使用js将ETH账户的资产打散其他账户web3
- 2024-09-27我轻松地将我的 React.js 应用程序翻译成了多种语言。下面是我是如何做到的... ??
- 2024-09-27?? 使用 useMemo 和 useCallback 加速 React:告别缓慢的重新渲染!??
- 2024-09-27Vue CLI多环境配置教程:新手入门指南
- 2024-09-27Vue CLI多环境配置教程:快速入门指南
- 2024-09-27Vue CLI教程:新手入门指南
- 2024-09-27Vue CLI教程:初学者快速入门指南
- 2024-09-27Vue3公共组件教程:入门与实践