首頁 > web前端 > js教程 > 基於jquery & json的省市區連動代碼_jquery

基於jquery & json的省市區連動代碼_jquery

WBOY
發布: 2016-05-16 17:52:10
原創
1033 人瀏覽過

效果示範:



html程式碼:

複製程式碼





省市區連動




Demo:















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 = " ";
var initDistrict = "";
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(>.change(change); });
}
province.change();
},
_LoadOptions: function (datapath, preobj, targetobj, parentobj, comparelen, initoption) {
$. >datapath,
function (r) {
var t = ''; // t: html容器
var s; // s: 選取標識
var pre; // pre: 初始值
if (preobj === undefined) {
pre = 0;
} else {
pre = preobj.val();
}
for (var i = 0; i s = '';
if (comparelen === 0) {
if (pre !== "" && pre !== 0 && r[i ].code === pre) {
s = ' selected="selected" ';
pre = '';
}
t = '';
}
else {
var p = parentobj.val();
if (p.substring(0, comparelen) === r[i].code.substring(0, comparelen)) {
if (pre !== "" && pre !== 0 && r[i].code === pre) {
s = ' selected="selected" ';
pre = '';
}
t = '';
}
}

}
if (initoption !== '') {
targetobj.html(initoption t);
} else {
targetobj.html(t);
}
},
"json"
);
}
};
} ();
citySelector.Init();
});


省市區json資料檔:
點選下載
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板