jquery 및 json_jquery를 기반으로 한 주 및 도시 연결 코드

효과 시연:

html 코드:

코드 복사 코드는 다음과 같습니다:

;

>

데모:

주를 선택하세요 🎜>
도시를 선택하세요
District" >
구와 카운티를 선택하세요



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


;
> ;




script.js 코드:

코드 복사
코드는 다음과 같습니다:

/* 작성자: elycir 생성: 2012-06 설명: 주 및 시 레벨 3(보조) 연결* / $(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 initCity = "도시를 선택하세요";
var initDistrict = "구 또는 카운티를 선택하세요 ";
return {
Init: function () {
var that = this;
that._LoadOptions(jsonProvince, preProvince, 지방, 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);
}); function () {
city.change() ;
});
}
province.change()
},
_LoadOptions: 함수(datapath, preobj, targetobj, parentobj, Comparelen, initoption) {
$.get(
datapath,
function (r) {
var t = ''; // t: html 컨테이너
var s; // s: 선택된 식별자
var pre; // pre: 초기 값
if (preobj === undefine) {
pre = 0
} else {
pre = preobj.val( );
}
for (var i = 0; i s = ''
if (비교 === 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 데이터 파일:
다운로드하려면 클릭하세요