省市联动JQ封装比较简洁调用的方法

<tr>
<td style="height: 25px; width: 30%; text-align: right">地区选择
：</td>
<td style="height: 25px; text-align: left">
<select id="Provice"></select>
<select id="City"></select>
<select id="Distinct"></select>
</td>
</tr>

<script type="text/javascript">

//刚开始加载数据
getAreaInfo("Provice", 1);//省

function getAreaInfo(id,preCode) {

$.getJSON("AddPurchasingTraders.aspx", { "preCode": preCode }, function (data) {
if (data != null) {
var str="";
for (var i = 0; i < data.length; i++) {

if(i==0)
{
str += '<option value="' + data[i].ProvinceCode + '"  selected="selected">' + data[i].AreaName + '</option>';
}
else {
str += '<option value="' + data[i].ProvinceCode + '">' + data[i].AreaName + '</option>';
}
}

$("#" + id).html(str);

if (id == "Provice") {
getAreaInfo("City", $("#Provice").val());//市
}
else if (id == "City") {
getAreaInfo("Distinct", $("#City").val());//区
}
}
})
}

//点击选择按钮改变触发事件
$("#Provice").change(function () {
getAreaInfo("City", $("#Provice").val());
});
$("#City").change(function () {
getAreaInfo("Distinct", $("#City").val());
});

</script>