本文主要为大家介绍下通过jquery实现三级联动select这里用到的json文件
只是事例
根据情况添加或编写
感兴趣的朋友可以参考下哈
希望对大家有所帮助
html和js部分
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=gbk />
<title>selectList</title>
<style type="text/css">
*{margin:
;padding:
;}
selectList{width:
px;margin:
px auto;}
</style>
<script type="text/javascript" src="jquery
js"></script>
</head>
<body>
<div class="selectList">
<select class="province">
<option>请选择</option>
</select>
<select class="city">
<option>请选择</option>
</select>
<select class="district">
<option>请选择</option>
</select>
</div>
<div class="selectList">
<select class="province">
<option>请选择</option>
</select>
<select class="city">
<option>请选择</option>
</select>
<select class="district">
<option>请选择</option>
</select>
</div>
<script type="text/javascript">
$(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+="<option value=
"+province
p+"
>"+province
p+"</option>";
});
oProvince
html(temp_html);
city();
};
//赋值市
var city = function(){
temp_html = "";
var n = oProvince
get(
)
selectedIndex;
$
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(
)
selectedIndex;
var n = oCity
get(
)
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+="<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文件（areajson）这里只是事例根据情况添加或编写
复制代码 代码如下:
[
{"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":"迁西县"}
]}
]}
]
各位最好自己封装成插件方便调用
