<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>世界地区三级联动</title>
<link href='chosen.min.css' rel='stylesheet'>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="chosen.jquery.min.js"></script>
<script type="text/javascript" src="areaList.js"></script>
<style type="text/css">
.dept_select{min-width: 200px;}
button{
padding: 4px 10px;
border-radius: 3px;
border: 0;
background: #444;
color: #fff;
}
</style>
</head>
<body>
<select id="country" class="dept_select"></select>
<select id="province" class="dept_select"></select>
<select id="city" class="dept_select"></select>
<button>提交</button>
<script type="text/javascript">
var areaObj = [];
function initLocation(e){
var a = 0;
for (var m in e) {
areaObj[a] = e[m];
var b = 0;
for (var n in e[m]) {
areaObj[a][b++] = e[m][n];
}
a++;
}
}
</script>
<script type="text/javascript" src="location_chs.js"></script>
<script type="text/javascript">
var country = '';
for (var a=0;a<=_areaList.length-1;a++) {
var objContry = _areaList[a];
country += '<option value="'+objContry+'" a="'+(a+1)+'">'+objContry+'</option>';
}
$("#country").html(country).chosen().change(function(){
var a = $("#country").find("option[value='"+$("#country").val()+"']").attr("a");
var _province = areaObj[a];
var province = '';
for (var b in _province) {
var objProvince = _province[b];
if (objProvince.n) {
province += '<option value="'+objProvince.n+'" b="'+b+'">'+objProvince.n+'</option>';
}
}
if (!province) {
province = '<option value="0" b="0">------</option>';
}
$("#province").html(province).chosen().change(function(){
var b = $("#province").find("option[value='"+$("#province").val()+"']").attr("b");
var _city = areaObj[a][b];
var city = '';
for (var c in _city) {
var objCity = _city[c];
if (objCity.n) {
city += '<option value="'+objCity.n+'">'+objCity.n+'</option>';
}
}
if (!city) {
var city = '<option value="0">------</option>';
}
$("#city").html(city).chosen().change();
$(".dept_select").trigger("chosen:updated");
});
$("#province").change();
$(".dept_select").trigger("chosen:updated");
});
$("#country").change();
$("button").click(function(){
alert($("#country").val()+$("#province").val()+$("#city").val());
});
</script>
</body>
</html>
世界地区三级联动demo(带完整国家地区信息)
4星 · 超过85%的资源 需积分: 50 102 浏览量
2018-02-06
08:44:58
上传
评论 1
收藏 77KB ZIP 举报 
世界级三级联动demo.zip （6个子文件） 
世界级三级联动demo 
chosen.jquery.min.js 26KB chosen.min.css 10KB location_chs.js 88KB jquery-2.1.3.min.js 82KB areaList.js 4KB
1.html 2KB资源评论
zaichuanguanshui2018-11-02数据可以作为参考
yuanzelin82020-10-24不错 很好很好
半霜2020-07-16还不错，可以参考
秦宇升2018-06-30没用 美国华盛顿下面的信息都不是新的
