全國城市地區Jquery插件
//************************************************
//版本:v1.0
//by:liuyh83 一舊飯
//************************************************
(function ($) {
function Location() {
this.xmldoc = null;
this.provinceDDl = null;
this.cityDDl = null;
this.districtDDl = null;
this._defaults = {
xmlpatch: "Location.xml",//城市地區XML路徑
xdis: true,//是否一直顯視城市和地區的選擇框
firstop: true //是否顯視選擇框的默認選擇
};
}
$.extend(Location.prototype, {
_attachLocation: function (target, options) {
var settings = $.extend(this._defaults, options);
var xmldoc = this._getXmldocument(settings.xmlpatch);
var lo = this;
this.xmldoc = xmldoc;
this.provinceDDl = $("<select/>");
this.cityDDl = $("<select/>");
this.districtDDl = $("<select/>");
this.provinceDDl.change(function () {
lo._cityPross(xmldoc);
});
this.cityDDl.change(function () {
lo._districtPross(xmldoc);
});
this._provincePross(xmldoc);
this.provinceDDl.appendTo("#" + $(target).attr("id"));
this.cityDDl.appendTo("#" + $(target).attr("id"));
this.districtDDl.appendTo("#" + $(target).attr("id"));
},
_provincePross: function (xmldoc) {
provinces = xmldoc.getElementsByTagName("Province");
this.provinceDDl.empty();
if (this._defaults.firstop == true) {
this.provinceDDl.append($("<option/>", { val: '0', text: "選擇省份" }));
}
for (var i = 0; i < provinces.length; i++) {
this.provinceDDl.append($("<option/>", { val: provinces[i].getAttribute("ProvinceId"), text: provinces[i].getAttribute("ProvinceName") }));
}
this._cityPross(xmldoc);
},
_cityPross: function (xmldoc) {
this.cityDDl.empty();
if (this._defaults.firstop == true) {
this.cityDDl.append($("<option/>", { val: '0', text: "選擇城市" }));
}
do {
var i = 0;
for (i = 0; i < provinces.length; i++) {
if (provinces[i].getAttribute("ProvinceId") == this.provinceDDl.val()) {
break;
}
}
var citys = new Array();
if (this.provinceDDl.val() != 0) {
citys = provinces[i].getElementsByTagName("City");
}
if (this._defaults.xdis || citys.length > 0 ) {
this.cityDDl.css("display", "inline");
}
else {
this.cityDDl.css("display", "none");
}
if (citys.length == 0) {
break;
}
for (var j = 0; j < citys.length; j++) {
this.cityDDl.append($("<option/>", { val: citys[j].getAttribute("CityId"), text: citys[j].getAttribute("CityName") }));
}
} while (false);
this._districtPross(xmldoc);
},
_districtPross: function (xmldoc) {
this.districtDDl.empty();
if (this._defaults.firstop == true) {
this.districtDDl.append($("<option/>", { val: '0', text: "選擇地區" }));
}
do {
var i = 0;
for (i = 0; i < provinces.length; i++) {
if (provinces[i].getAttribute("ProvinceId") == this.provinceDDl.val()) {
break;
}
}
var citys = new Array();
if (this.provinceDDl.val() != 0) {
citys = provinces[i].getElementsByTagName("City");
}
// if (citys.length == 0) {
// break;
// }
var j = 0;
for (j = 0; j < citys.length; j++) {
if (citys[j].getAttribute("CityId") == this.cityDDl.val()) {
break;
}
}
var districts = new Array();
if (this.cityDDl.val() != 0) {
districts=citys[j].getElementsByTagName("District");
}
if (this._defaults.xdis || districts.length > 0) {
this.districtDDl.css("display", "inline");
}
else {
this.districtDDl.css("display", "none");
}
if (districts.length == 0) {
break;
}
for (var x = 0; x < districts.length; x++) {
this.districtDDl.append($("<option/>", { val: districts[x].getAttribute("DistrictId"), text: districts[x].getAttribute("DistrictName") }));
}
} while (false);
},
_getXmldocument: function (ld_url) {
if (navigator.userAgent.indexOf("Opera") > -1) {
ld_url += ("?seed=" + Math.random());
};
var lo_xmlhttp = this._createXmlhttp();
if (!lo_xmlhttp) {
return null;
}
lo_xmlhttp.open("GET", ld_url, false);
lo_xmlhttp.send(null);
var doc = "";
if (lo_xmlhttp.status == 200) {
doc = lo_xmlhttp.responseXML.documentElement;
return doc;
}
return null;
},
_createXmlhttp: function () {
var lo_http_request = false;
if (window.ActiveXObject) {
//var ld_xmlhttps=["MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
var ld_xmlhttps = ["MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var l_i = 0; l_i < ld_xmlhttps.length; l_i++) {
try {
lo_http_request = new ActiveXObject(ld_xmlhttps[l_i]);
break;
}
catch (ld_e) {
lo_http_request = false;
};
};
}
else {
try {
lo_http_request = new XMLHttpRequest();
}
catch (ld_e) {
lo_http_request = false;
};
};
return lo_http_request;
}
});
$.fn.location = function (options) {
return this.each(function () {
window["location_" + $(this).attr("id")] = new Location();
var location = window["location_" + $(this).attr("id")];
location._attachLocation(this, options);
});
};
$.extend($.fn, {
GetProvinceObj: function () { return window["location_" + $(this).attr("id")].provinceDDl; },//獲取省份選擇框的對像
GetProvinceVal: function () { return window["location_" + $(this).attr("id")].provinceDDl.val(); },//獲取省份選擇框的val屬性
GetCityObj: function () { return window["location_" + $(this).attr("id")].cityDDl; },//獲取城市選擇框的對像
GetCityVal: function () { return window["location_" + $(this).attr("id")].cityDDl.val(); },//獲取城市選擇框的val屬性
GetDistrictObj: function () { return window["location_" + $(this).attr("id")].districtDDl; },//獲取地區選擇框的對像
GetDistrictVal: function () { return window["location_" + $(this).attr("id")].districtDDl.val(); },//獲取地區選擇框的val屬性
GetProvinceTxt: function () { return window["location_" + $(this).attr("id")].provinceDDl.find("option:selected").text(); },//獲取省份選擇框的Text屬性
GetCityTxt: function () { return window["location_" + $(this).attr("id")].cityDDl.find("option:selected").text(); },//獲取城市選擇框的Text屬性
GetDistrictTxt: function () { return window["location_" + $(this).attr("id")].districtDDl.find("option:selected").text(); },//獲取地區選擇框的Text屬性
SetProvinceVal: function (v) { window["location_" + $(this).attr("id")].provinceDDl.val(v); },
SetCityVal: function (v) { window["location_" + $(this).attr("id")].cityDDl.val(v); },
SetDistrictVal: function (v) { window["location_" + $(this).attr("id")].districtDDl.val(v); },
SetProvinceIndex: function (v) { window["location_" + $(this).attr("id")].provinceDDl.get(0).selectedIndex = v; },
SetCityIndex: function (v) { window["location_" + $(this).attr("id")].cityDDl.get(0).selectedIndex = v; },
SetDistrictIndex: function (v) { window["location_" + $(this).attr("id")].districtDDl.get(0).selectedIndex = v; }
});
})(jQuery); 有能力的自己擴展吧。。數據庫是從網上下載再加已製作
配套XML和MSSQL數據庫下載(XML的數據是從SQL中導出)
使用方法
<div id="location"></div>
$("#location").Location({
xmlpatch:"Location.xml" //xml數據文件路經
});
$("#location").GetProvinceVal();//獲取省份的值