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



jQuery 1.3.2 简单实现select二级联动
代码如下:







$(document).ready(function(){
$("#province").change(function(){
$("#province option").each(function(i,o){
if($(this).attr("selected"))
{
$(".city").hide();
$(".city").eq(i).show();
}
});
});
$("#province").change();
});




----请选择省份----
北京
上海
江苏


----请选择城市----


东城
西城
崇文
宣武
朝阳


黄浦
卢湾
徐汇
长宁
静安


南京
镇江
苏州
南通
扬州




JQuery实现的二级联动菜单
先看页面代码
Html代码
代码如下:

*短信类型：


==请选择类型==
<#list typeList as t>
${t.name}










其中id为first的下拉列表为第一个下拉列表，id为second的区域为第二个下拉列表。
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+="==请选择类型==";
for(var i=0;ioptions+=""+myJSON[i].name+"";
}
$("#area").html(options);
$("#second").show();
}
else if(myJSON.length<=0){
$("#second").hide();
}
});
}
else{
$("#second").hide();
}
});
});