<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ provincial and urban linkage</title>
</head>
<body>
<select name="" id="province" onchange="pro(this.value)">
<option value="0">Please select a province</option>
</select>
<select name="" id="city" onchange="cit(this.value)">
<option value="0">Please select a city</option>
</select>
<select name="" id="country">
<option value="0">Please select a county</option>
</select>
<script src="jquery-1.10.1.min.js"></script>
<script>
var data = {
'Hunan':{
"Yiyang": ["Yiyang 1", "Yiyang 2", "Yiyang 3"],
"Yueyang": ["Yueyang 1", "Yueyang 2", "Yueyang 3", "Yueyang 4", "Yueyang 5", "Yueyang 6", "Yueyang 7"],
"Chenzhou":["Chenzhou1","Chenzhou2","Chenzhou3"],
"Xiangtan": ["Xiangtan 1", "Xiangtan 2", "Xiangtan 3"]
},
'Guangdong':{
"广州":["广州1","chaoyi","onestopweb.iteye.com"],
"Zhuhai": ["Zhuhai 1", "Zhuhai 2", "Zhuhai 3"],
"Foshan":["Foshan 1"]
},
'Henan':{
"Zhengzhou":["Zhengzhou 1","Zhengzhou 2","Zhengzhou 3"],
"Luoyang": ["Luoyang 1", "Luoyang 2", "Luoyang 3"],
}
}
var p="";
for(var key in data){
p+='<option value="'+key+'">'+key+'</option>';
}
$('#province').append(p);
var pname="";
function pro(a) {
var c='<option value="0">Please select a city</option>';
$('#city').html("");
for(var k in data[a]){
c+='<option value="'+k+'">'+k+'</option>';
}
$('#city').append(c);
pname=a;
}
function cit(a) {
var cou='<option value="0">Please select a county</option>';
$('#country').html("");
for(var k in data[pname][a]){
cou+='<option value="'+data[pname][a][k]+'">'+data[pname][a][k]+'</option>';
}
$('#country').append(cou);
}
</script>
</body>
</html>
Effect picture: