基于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 面向对象继承
Nov 26 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
基于php使用memcache存储session的详解
2013/06/25 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
分享一个python的aes加密代码
2020/12/22 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
省级优秀毕业生主要事迹
2014/05/29 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
话题作文之自信作文
2019/11/15 职场文书
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫
Mysql 一主多从的部署
2022/05/20 MySQL