简单实现jQuery级联菜单


Posted in Javascript onJanuary 09, 2017

本文实例为大家分享了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级联菜单

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
用javascript获取textarea中的光标位置
May 06 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
详解TypeScript的基础类型
Feb 18 Javascript
prototype与__proto__区别详细介绍
Jan 09 #Javascript
jQuery实现二维码扫描功能
Jan 09 #Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 #Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 #Javascript
基于jQuery实现滚动刷新效果
Jan 09 #Javascript
用jQuery实现优酷首页轮播图
Jan 09 #Javascript
AngularJS实现表单验证功能
Jan 09 #Javascript
You might like
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
php统计数组元素个数的方法
2015/07/02 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
IE中createElement需要注意的一个问题
2010/07/13 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
基于node实现websocket协议
2016/04/25 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
Python 递归函数详解及实例
2016/12/27 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
python+requests接口自动化框架的实现
2020/08/31 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
本科毕业生自我鉴定
2013/11/02 职场文书
搬家公司的创业计划书
2014/01/01 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
母亲节感言
2015/08/03 职场文书
golang中的空slice案例
2021/04/27 Golang