select联动案例联动三级html,简单实用jquery版三级联动select示例

html和js部分

selectList

*{margin:0;padding:0;}

.selectList{width:200px;margin:50px auto;}

请选择

请选择

请选择

请选择

请选择

请选择

$(function(){

$(".selectList").each(function(){

var url = "area.json";

var areaJson;

var temp_html;

var oProvince = $(this).find(".province");

var oCity = $(this).find(".city");

var oDistrict = $(this).find(".district");

//初始化省

var province = function(){

$.each(areaJson,function(i,province){

temp_html+=""+province.p+"";

});

oProvince.html(temp_html);

city();

};

//赋值市

var city = function(){

temp_html = "";

var n = oProvince.get(0).selectedIndex;

$.each(areaJson[n].c,function(i,city){

temp_html+=""+city.ct+"";

});

oCity.html(temp_html);

district();

};

//赋值县

var district = function(){

temp_html = "";

var m = oProvince.get(0).selectedIndex;

var n = oCity.get(0).selectedIndex;

if(typeof(areaJson[m].c[n].d) == "undefined"){

oDistrict.css("display","none");

}else{

oDistrict.css("display","inline");

$.each(areaJson[m].c[n].d,function(i,district){

temp_html+=""+district.dt+"";

});

oDistrict.html(temp_html);

};

};

//选择省改变市

oProvince.change(function(){

city();

});

//选择市改变县

oCity.change(function(){

district();

});

//获取json数据

$.getJSON(url,function(data){

areaJson = data;

province();

});

});

});

json文件(area.json)，这里只是事例，根据情况添加或编写

[

{"p":"江西省",

"c":[

{"ct":"南昌市",

"d":[

{"dt":"西湖区"},

{"dt":"东湖区"},

{"dt":"高新区"}

]},

{"ct":"赣州市",

"d":[

{"dt":"瑞金县"},

{"dt":"南丰县"},

{"dt":"全南县"}

]}

]},

{"p":"北京",

"c":[

{"ct":"东城区"},

{"ct":"西城区"}

]},

{"p":"河北省",

"c":[

{"ct":"石家庄",

"d":[

{"dt":"长安区"},

{"dt":"桥东区"},

{"dt":"桥西区"}

]},

{"ct":"唐山市",

"d":[

{"dt":"滦南县"},

{"dt":"乐亭县"},

{"dt":"迁西县"}

]}

]}

]

各位最好自己封装成插件，方便调用