简单实现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 相关文章推荐
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
理解JavaScript事件对象
Jan 25 Javascript
基于jquery实现图片放大功能
May 07 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
如何用php获取文件名后缀
2013/06/09 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
JavaScript高级程序设计
2006/12/29 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
介绍下Lucene建立索引的过程
2016/03/02 面试题
外科实习自我鉴定
2013/10/06 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
自荐信模板大全
2015/03/27 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android
delete in子查询不走索引问题分析
2022/07/07 MySQL