简单实用jquery版三级联动*示例

html和js部分


复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=gbk />
<title>*List</title>
<style type=“text/css“>
*{margin:0;padding:0;}
.*List{width:200px;margin:50px auto;}
</style>
<script type=“text/javascript“ src=“jquery1.7.1.js“></script>
</head>
<body>
<div class=“*List“>
<* class=“province“>
<option>请选择</option>
</*>
<* class=“city“>
<option>请选择</option>
</*>
<* class=“district“>
<option>请选择</option>
</*>
</div>
<div class=“*List“>
<* class=“province“>
<option>请选择</option>
</*>
<* class=“city“>
<option>请选择</option>
</*>
<* class=“district“>
<option>请选择</option>
</*>
</div>
<script type=“text/javascript“>
$$(function(){
$$(“.*List“).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+=“<option value=‘“+province.p+“‘>“+province.p+“</option>“;
});
oProvince.html(temp_html);
city();
};
//赋值市
var city = function(){
temp_html = ““;
var n = oProvince.get(0).*edIndex;
$$.each(areaJson[n].c,function(i,city){
temp_html+=“<option value=‘“+city.ct+“‘>“+city.ct+“</option>“;
});
oCity.html(temp_html);
district();
};
//赋值县
var district = function(){
temp_html = ““;
var m = oProvince.get(0).*edIndex;
var n = oCity.get(0).*edIndex;
if(typeof(areaJson[m].c[n].d) == “undefined“){
oDistrict.css(“*“,“none“);
}else{
oDistrict.css(“*“,“inline“);
$$.each(areaJson[m].c[n].d,function(i,district){
temp_html+=“<option value=‘“+district.dt+“‘>“+district.dt+“</option>“;
});
oDistrict.html(temp_html);
};
};
//选择省改变市
oProvince.change(function(){
city();
});
//选择市改变县
oCity.change(function(){
district();
});
//获取json数据
$$.getJSON(url,function(data){
areaJson = data;
province();
});
});
});
</script>
</body>
</html>

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“:“迁西县“}
]}
]}
]

分享至:
good 40
  js一般方法改写成面向对象方法的无限级折叠菜单示例代码
  原生javascript和jquery判断浏览器版本等信息

发表评论

文明评论,重在参与

暂无评论!
返回上级 返回首页
首页 空间 好友 社区 论坛

返回彩版 意见反馈 联系客服

苏ICP备14025100号-4 客服QQ:978215261