jquery と json_jquery に基づく州と都市の連携コード

効果のデモンストレーション:

html コード:

コードをコピーコードは次のとおりです。

;

>
デモ:


🎜>
都市を選択してください
District" >
地区と郡を選択してください



"hidden" value="440500" id="pre_city"/>
;
> ;




script.js コード:

コードをコピーします

コードは次のとおりです:

/*

作成者: elycir 作成: 2012-06 説明: 州および地方自治体レベル 3 (セカンダリ) リンケージ* / $(function () { var citySelector = function () { var 州 = $("#province");

var city = $("#city");

var District = $("#district");
var preProvince = $("#pre_province");
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 initCity = "都市を選択してください";
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() ;
});
province.change();
},
_LoadOptions: function (datapath, preobj, targetobj, parentobj, Comparelen, initoption) {
$.get(
datapath,
function (r) {
var t = ''; // t: html コンテナ
var s; // s: 選択された識別子
var pre; // pre: 初期値
if (preobj === 未定義) {
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 = '' r[i].name ''
}
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 = '' r[i].name '
}
}

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


県と市json データ ファイル:
クリックしてダウンロード