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();
}
});
});
