jQuery世界城市下拉三级联动特效代码下载

jQuery世界城市下拉三级联动特效代码下载

1. 引入CSS

<link href='chosen.min.css' rel='stylesheet'>

2. 引入JS

<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>
<script type="text/javascript" src="location_chs.js"></script>

3. HTML代码

<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">
	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';">
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到