第八篇 一个用JS写的省市县三级联动

ALTER PROCEDURE [dbo].[getstatisticProvince]
AS BEGIN
SELECT RegionCode ,Province,CITY,TOWN FROM [dbo].[Region]
END

<tr>
<th>
<label class="col-lg-3 control-label">所在省:</label>
</th>
<th>
<select class="form-control input-sm" id="sProvince" name="sProvince">
</select>
</th>

<th>
<label class="col-lg-3 control-label">所在市:</label>
</th>
<th>
<select class="form-control input-sm" id="sCity" name="sCity">
</select>
</th>

<th>
<label class="col-lg-3 control-label">所在区:</label>
</th>
<th>
<select class="form-control input-sm" id="sTown" name="sTown">
</select>
</th>
<th>
<input type="text" id="txtregion" style="display: none" name="RegionCode"/>
</th>
</tr>

function Dsy() {
this.Items = {};
}

var temp = new Dsy();
Dsy.prototype.add = function (id, iArray) {
if (iArray["Province"] != "") {

if (this.Exists(id)) {
this.Items[id] = this.Items[id] + "," + JSON.stringify(iArray);
} else {
this.Items[id] = JSON.stringify(iArray);
}
}
};
Dsy.prototype.Exists = function(id) {
if (typeof(this.Items[id]) == "undefined") return false;
return true;
};

function change(v) {
var str = "province";
for (i = 0; i < v; i++) {
str = document.getElementById(s[i])[document.getElementById(s[i]).selectedIndex].text;
}
var ss = document.getElementById(s[v]);

with (ss) {
length = 0;
options[0] = new Option(opt0[v], '3537');//添加空时的ID
if (v == 1) {
options[0] = new Option(opt0[v], document.getElementById(s[0])[document.getElementById(s[0]).selectedIndex].value);
}
else  if (v == 2) {
options[0] = new Option(opt0[v], document.getElementById(s[1])[document.getElementById(s[1]).selectedIndex].value);
}
if (v && document.getElementById(s[v - 1]).selectedIndex > 0 || !v) {
if (dsy.Exists(str)) {
ar = eval("["+dsy.Items[str]+"]");
for (i = 0; i < ar.length; i++) {
if (v == 0) {
options[length] = new Option(ar[i]["Province"], ar[i]["RegionCode"]);
}
else if (v == 1) {
if (ar[i]["CITY"] != document.getElementById(s[1])[document.getElementById(s[1]).length-1].text) {
options[length] = new Option(ar[i]["CITY"], ar[i]["RegionCode"]);
}
} else {
if (ar[i]["TOWN"]!="")
options[length] = new Option(ar[i]["TOWN"], ar[i]["RegionCode"]);
}

}

if (v)options[0].selected = true;
}
}
if (++v < s.length) {change(v);}
}
}

var dsy = new Dsy();

var s = ["sProvince", "sCity", "sTown"];//id对应到前台页面
var opt0 = ["省份", "地级市", "市、县级市、县"];

function SetDsy(code) {
var province;
$.ajax({
url: '/JobInfo/GetJson',//目标路径函数
type: 'GET',
dataType: 'json',
timeout: 10000,
cache: false,
success: function (data) {
province = eval(data);
for (i = 0; i < province.length; i++) {
if ((province[i]["CITY"] == "" || province[i]["CITY"] == null) && (province[i]["TOWN"] == "" || province[i]["TOWN"] == null) && province[i]["Province"]!=null) {
dsy.add("province", province[i]);
} else if (province[i]["TOWN"] == "") {
dsy.add(province[i]["Province"], province[i]);
} else {
dsy.add(province[i]["CITY"], province[i]);
}
}
//dsy.add("province", rPro);

for (i = 0; i < s.length - 1; i++) {
SetEvent(i);
document.getElementById(s[i]).onchange = new Function("change(" + (i + 1) + ");");
}
SetEvent(2);
change(0);
if (code != "") {
GetIndex(code);
}

}
});

}
function SetEvent(i) {
$("#"+s[i]).change(function () {
$("#txtregion").val(this.value);

});
}
//修改时候选择当前ID下面对应的值
function GetIndex(code) {
$.ajax({
url: '/JobInfo/GetQuery',
type: 'GET',
data: { code: code },//$("#txtregion").val(),
dataType: 'json',
timeout: 10000,
cache: false,
success: function(data) {
var Pro = eval("[" + dsy.Items["province"] + "]");
for (i = 0; i < Pro.length; i++) {
if (Pro[i]["Province"] == data[0]["Province"]) {
$("#" + s[0])[0][i + 1].selected = true;
change(1);
break;
}

}
var city = eval("[" + dsy.Items[data[0]["Province"]] + "]");
for (i = 0; i < city.length; i++) {
if (city[i]["CITY"] == data[0]["CITY"]) {
$("#" + s[1])[0][i + 1].selected = true;
change(2);
break;
}
}

var town = eval("[" + dsy.Items[data[0]["CITY"]] + "]");
for (i = 0; i < town.length; i++) {
if (town[i]["TOWN"] == data[0]["TOWN"]) {
$("#" + s[2])[0][i + 1].selected = true;

break;
}

}
}
});
}