<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery世界城市三级联动下拉选择代码</title>
<link href='chosen.min.css' rel='stylesheet'>
<style type="text/css">
.dept_select{min-width: 200px;}
button{
padding: 4px 10px;
border-radius: 3px;
border: 0;
background: #444;
color: #fff;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="chosen.jquery.min.js"></script>
<script type="text/javascript" src="area_chs.js"></script>
</head>
<body><script src="/demos/googlegg.js"></script>
<center>
<select id="country" class="dept_select"></select>
<select id="province" class="dept_select"></select>
<select id="city" class="dept_select"></select>
<button>提交</button>
</center>
<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>
<div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
</html>
