基于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 相关文章推荐
JavaScript 页面坐标相关知识整理
Jan 09 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
jQuery实现日历效果
Sep 11 jQuery
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
PHP读取MySQL数据代码
2008/06/05 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
jQuery 创建Dom元素
2010/05/07 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
浅谈Javascript实现继承的方法
2015/07/06 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
印度民族服装购物网站:BIBA
2019/08/05 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
医学检验专业个人求职信范文
2013/12/04 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
军训感想500字
2014/02/20 职场文书
合作协议书范文
2014/08/20 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
离婚案件被告代理词
2015/05/23 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
Python进程池与进程锁之语法学习
2022/04/11 Python