지역 3단계로 되는 동적셀렉트좀 봐주세요...ㅠㅠㅠㅠ
대략소스는..
var sojaeji = function(sido, gugun, dong) {
var obj = this;
//window.onload = function() {
obj.sido = document.getElementById(sido);
obj.gugun = document.getElementById(gugun);
obj.dong = document.getElementById(dong);
obj.update_sido();
obj.sido.onchange = function() {
obj.update_gugun.apply(obj);
obj.update_dong.apply(obj);
}
obj.gugun.onchange = function() {
obj.update_dong.apply(obj);
}
//}
}
sojaeji.prototype = {
update_gugun : function() {
if (this.gugun == null) return;
var gugun = this[this.sido.value];
this.gugun.innerHTML = "";
for(var i=0; i<gugun.length; i++)
this.gugun.options.add(new Option(gugun[i], gugun[i]));
},
update_dong : function() {
if (this.dong == null) return;
var dong = this[this.sido.value+"->"+this.gugun.value];
this.dong.innerHTML = "";
for(var i=0; i<dong.length; i++)
this.dong.options.add(new Option(dong[i], dong[i]));
},
update_sido : function() {
if (this.sido == null) return;
var sido = this['시도'];
for(var i=0; i<sido.length; i++)
this.sido.options.add(new Option(sido[i], sido[i]));
this.update_gugun();
this.update_dong();
},
'시도' : ['지역선택','서울','부산','대구','인천','광주','대전','울산','강원','경기','경남','경북','전남','전북','제주','충남','충북'],
'지역선택' : ['세부지역1'],
'지역선택->세부지역1' : ['세부지역2'],
'서울' : ['강남구','강동구','강북구','강서구','관악구','광진구','구로구','금천구','노원구','도봉구','동대문구','동작구','마포구','서대문구','서초구','성동구','성북구','송파구','양천구','영등포구','용산구','은평구','종로구','중구','중랑구'],
'부산' : ['강서구','금정구','남구','동구',....................
<select name="sido2" id="sido2"></select>
<select name="gugun2" id="gugun2"></select>
<select name="dong2" id="dong2"></select>
<script type="text/javascript">
new sojaeji('sido2', 'gugun2', 'dong2');
</script>
대략 소스는 위와 같습니다...
긍데 수정페이지에서는 해당값이 선택되게 하여야 하는데..
도무지 방법을 모르겠습니다..
도움좀 부탁드립니다.
자바스크립트는 아직.. 잘몰라서요..
일반적인 셀렉트 선택방법으로 되질않더라구요..ㅠㅠ
꼭좀 도움좀 부탁드립니다... 아니면 좀더 쉬운 소스가 있는곳
위치좀 알려주셔도 너무 감사하구요..<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>
var sojaeji = function(sido, gugun, dong) {
var obj = this;
//window.onload = function() {
obj.sido = document.getElementById(sido);
obj.gugun = document.getElementById(gugun);
obj.dong = document.getElementById(dong);
obj.update_sido();
obj.sido.onchange = function() {
obj.update_gugun.apply(obj);
obj.update_dong.apply(obj);
}
obj.gugun.onchange = function() {
obj.update_dong.apply(obj);
}
//}
}
sojaeji.prototype = {
update_gugun : function() {
if (this.gugun == null) return;
var gugun = this[this.sido.value];
this.gugun.innerHTML = "";
for(var i=0; i<gugun.length; i++)
this.gugun.options.add(new Option(gugun[i], gugun[i]));
},
update_dong : function() {
if (this.dong == null) return;
var dong = this[this.sido.value+"->"+this.gugun.value];
this.dong.innerHTML = "";
for(var i=0; i<dong.length; i++)
this.dong.options.add(new Option(dong[i], dong[i]));
},
update_sido : function() {
if (this.sido == null) return;
var sido = this['시도'];
for(var i=0; i<sido.length; i++)
this.sido.options.add(new Option(sido[i], sido[i]));
this.update_gugun();
this.update_dong();
},
'시도' : ['지역선택','서울','부산','대구','인천','광주','대전','울산','강원','경기','경남','경북','전남','전북','제주','충남','충북'],
'지역선택' : ['세부지역1'],
'지역선택->세부지역1' : ['세부지역2'],
'서울' : ['강남구','강동구','강북구','강서구','관악구','광진구','구로구','금천구','노원구','도봉구','동대문구','동작구','마포구','서대문구','서초구','성동구','성북구','송파구','양천구','영등포구','용산구','은평구','종로구','중구','중랑구'],
'부산' : ['강서구','금정구','남구','동구',....................
<select name="sido2" id="sido2"></select>
<select name="gugun2" id="gugun2"></select>
<select name="dong2" id="dong2"></select>
<script type="text/javascript">
new sojaeji('sido2', 'gugun2', 'dong2');
</script>
대략 소스는 위와 같습니다...
긍데 수정페이지에서는 해당값이 선택되게 하여야 하는데..
도무지 방법을 모르겠습니다..
도움좀 부탁드립니다.
자바스크립트는 아직.. 잘몰라서요..
일반적인 셀렉트 선택방법으로 되질않더라구요..ㅠㅠ
꼭좀 도움좀 부탁드립니다... 아니면 좀더 쉬운 소스가 있는곳
위치좀 알려주셔도 너무 감사하구요..<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 1개