HTML实现二级联动下拉菜单,基于jquery的二级联动菜单实现代码

jQuery 1.3.2 简单实现select二级联动

jQuery 二级联动

$(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代码

*短信类型：

==请选择类型==

${t.name}

#list>

其中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;i

options+=""+myJSON[i].name+"";

}

$("#area").html(options);

$("#second").show();

}

else if(myJSON.length<=0){

$("#second").hide();

}

});

}

else{

$("#second").hide();

}

});

});