基于jquery的二级联动菜单实现代码


Posted in Javascript onApril 25, 2011

jQuery 1.3.2 简单实现select二级联动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>jQuery 二级联动</title> 
<script src="http://img.3water.com/jslib/jquery/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#province").change(function(){ 
$("#province option").each(function(i,o){ 
if($(this).attr("selected")) 
{ 
$(".city").hide(); 
$(".city").eq(i).show(); 
} 
}); 
}); 
$("#province").change(); 
}); 
</script> 
</head> 
<body> 
<select id="province"> 
<option>----请选择省份---- 
<option>北京 
<option>上海 
<option>江苏 
</select> 
<select class="city"> 
<option>----请选择城市---- 
</select> 
<select class="city"> 
<option>东城</option> 
<option>西城</option> 
<option>崇文</option> 
<option>宣武</option> 
<option>朝阳</option> 
</select> 
<select class="city"> 
<option>黄浦</option> 
<option>卢湾</option> 
<option>徐汇</option> 
<option>长宁</option> 
<option>静安</option> 
</select> 
<select class="city"> 
<option>南京</option> 
<option>镇江</option> 
<option>苏州</option> 
<option>南通</option> 
<option>扬州</option> 
</select> 
</body> 
</html>

JQuery实现的二级联动菜单
先看页面代码
Html代码
<tr> 
<td align="right" width="30%"><span class="red">*</span>短信类型:</td> 
<td align="left"> 
<select name='city' id='first'> 
<option value='-1'>==请选择类型==</option> 
<#list typeList as t> 
<option value='${t.id}'>${t.name}</option> 
</#list> 
</select> 
   
<span id="second"> 
<select id="area" name="msgTypeId"> 
</select> 
</span> 
</td> 
</tr>

其中id为first的下拉列表为第一个下拉列表,id为second的区域为第二个下拉列表。
JavaScript代码:
<script language="javascript"> 
$(function(){ 
$("#second").hide(); //初始化的时候第二个下拉列表隐藏 
$("#first").change(function(){ //当第一个下拉列表变动内容时第二个下拉列表将会显示 
var parentId=$("#first").val(); 
if(null!= parentId && ""!=parentId){ 
$.getJSON("http://localhost/msg/getSecondTypesJson",{id:parentId},function(myJSON){ 
var options=""; 
if(myJSON.length>0){ 
options+="<option value=''>==请选择类型==</option>"; 
for(var i=0;i<myJSON.length;i++){ 
options+="<option value="+myJSON[i].id+">"+myJSON[i].name+"</option>"; 
} 
$("#area").html(options); 
$("#second").show(); 
} 
else if(myJSON.length<=0){ 
$("#second").hide(); 
} 
}); 
} 
else{ 
$("#second").hide(); 
} 
}); 
}); 
</script>
Javascript 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
JS实现拖动示例代码
Nov 01 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 #Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 #Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 #Javascript
25个好玩的JavaScript小游戏分享
Apr 22 #Javascript
jQuery Ajax 实例全解析
Apr 20 #Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 #Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 #Javascript
You might like
hessian 在PHP中的使用介绍
2010/12/13 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
Python读写unicode文件的方法
2015/07/10 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
使用python求解二次规划的问题
2020/02/29 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
业务主管岗位职责
2013/11/20 职场文书
小学生暑假感言
2014/02/06 职场文书
企业年会主持词
2014/03/27 职场文书
企业环保标语
2014/06/10 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
2016年元旦主持词
2015/07/06 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript