<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市区三级联动</title>
</head>
<body>
<form>
<select id="province">
<option>请选择省份</option>
</select>
<select id="city">
<option>请选择城市</option>
</select>
<select id="district">
<option>请选择区域</option>
</select>
</form>
<script src="json.js"></script>
<script type="text/javascript">
var proData = [],
cityData = [],
distData = []
var proSelect = document.getElementById("province"),
citySelect = document.getElementById("city"),
districtSelect = document.getElementById("district")
var curPro = "",
curCity = ""
// 封装更新选择列表函数
function fillselect(select,list){
for (var i = select.length-1i >0 i--){
select.remove(i)
}
list.forEach(function(data){
var option = new Option(data.name, data.sheng)
option.dataset.di = data.di
select.add(option)
})
}
// 将数据按省、市、地区分别存储
dataJson.forEach(function(data){
if (data.level === 1){
proData.push(data)
}
if (data.level === 2){
cityData.push(data)
}
if (data.level === 3){
distData.push(data)
}
})
fillselect(proSelect,proData)
// 监听一级省份选择列表change事件，更新二级城市列表
proSelect.addEventListener("change",function(event){
var val = event.target.value
var list = []
cityData.forEach(function(d){
if (d.sheng === val) {
list.push(d)
}
})
fillselect(citySelect,list)
})
// 监听二级城市选择列表change事件，更新三级区域列表
citySelect.addEventListener("change",function(event){
var val = event.target.value
var curIndex = event.target.selectedIndex
curCity = event.target[curIndex].dataset.di
console.log(event.target,curCity)
var list = []
distData.forEach(function(d){
if (d.di === curCity &&d.sheng === val) {
list.push(d)
}
})
fillselect(districtSelect,list)
})
</script>
</body>
</html>
淘宝模板，店铺装修都不支持JS。别说js了，连id属性都不能使用。都是为了安全考虑，如果用了js，那就可以大量自定义覆写店铺的代码，很危险的。更有甚者，淘宝在加载时还对iframe进行检测，如果发现页面有父页面，则不加载，可见，淘宝web的严格。淘宝的web技术独步天下，一直被模仿。其实，不用js也能做出很好的店面效果的。希望有用。
