效果演示：
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>省市区联动</title>
<script src=”/Scripts/jquery.min.js” type=”text/javascript”></script>
<script src=”/Scripts/script.js” type=”text/javascript”></script>
</head>
<body>
<h2>Demo:</h2>
<select id=”province”>
<option value=”0″>请选择省份</option>
</select>
<select id=”city”>
<option value=”0″>请选择城市</option>
</select>
<select id=”district”>
<option value=”0″>请选择区县</option>
</select>
<!–下列为初始值(可选,编辑表单时设置)–>
<input type=”hidden” value=”440000″ id=”pre_province”/>
<input type=”hidden” value=”440500″ id=”pre_city”/>
<input type=”hidden” value=”440511″ id=”pre_district”/>
</body>
</html>
script.js代码：
/*
author: elycir
create: 2012-06
description: 省市区三级(二级)联动
*/
$(function () {
var citySelector = function () {
var province = $(“#province”);
var city = $(“#city”);
var district = $(“#district”);
var preProvince = $(“#pre_province”);
var preCity = $(“#pre_city”);
var preDistrict = $(“#pre_district”);
var jsonProvince = “/content/json-array-of-province.js”;
var jsonCity = “/content/json-array-of-city.js”;
var jsonDistrict = “/content/json-array-of-district.js”;
var hasDistrict = true;
var initProvince = “<option value=’0′>请选择省份</option>”;
var initCity = “<option value=’0′>请选择城市</option>”;
var initDistrict = “<option value=’0′>请选择区县</option>”;
return {
Init: function () {
var that = this;
that._LoadOptions(jsonProvince, preProvince, province, null, 0, initProvince);
province.change(function () {
that._LoadOptions(jsonCity, preCity, city, province, 2, initCity);
});
if (hasDistrict) {
city.change(function () {
that._LoadOptions(jsonDistrict, preDistrict, district, city, 4, initDistrict);
});
province.change(function () {
city.change();
});
}
province.change();
},
_LoadOptions: function (datapath, preobj, targetobj, parentobj, comparelen, initoption) {
