基于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的parseInt 进制问题
May 07 Javascript
JQuery 学习笔记 选择器之三
Jul 23 Javascript
jquery.ui.progressbar 中文文档
Nov 26 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
javascript每日必学之封装
Feb 23 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
微信小程序实现消息框弹出动画
Apr 18 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
JS高级运动实例分析
2016/12/20 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
python 字符串split的用法分享
2013/03/23 Python
详解python的数字类型变量与其方法
2016/11/20 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
python绘制高斯曲线
2021/02/19 Python
python实现图片转字符画的完整代码
2021/02/21 Python
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
美德好少年事迹材料
2014/01/19 职场文书
怎样写观后感
2015/06/19 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
三年级作文之小小梦想
2019/12/06 职场文书