html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>jQuery Select Example</title>
<script src="https://code.jquery.com/jquery-latest.min.js" type="application/javascript"></script>
<script type="application/javascript" src="https://zelkun.tistory.com/attachment/cfile8.uf@99BB7A3D5D45C065343307.js"></script>
</head>
<body>
<div>
<select id="sido">
<option value="">선택</option>
</select>
<select id="sigugun">
<option value="">선택</option>
</select>
<select id="dong">
<option value="">선택</option>
</select>
</div>
</body>
</html>
|
cs |
자바스크립트
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
jQuery(document).ready(function(){
//sido option 추가
jQuery.each(hangjungdong.sido, function(idx, code){
//append를 이용하여 option 하위에 붙여넣음
jQuery('#sido').append(fn_option(code.sido, code.codeNm));
});
//sido 변경시 시군구 option 추가
jQuery('#sido').change(function(){
jQuery('#sigugun').show();
jQuery('#sigugun').empty();
jQuery('#sigugun').append(fn_option('','선택')); //
jQuery.each(hangjungdong.sigugun, function(idx, code){
if(jQuery('#sido > option:selected').val() == code.sido)
jQuery('#sigugun').append(fn_option(code.sigugun, code.codeNm));
});
//세종특별자치시 예외처리
//옵션값을 읽어 비교
if(jQuery('#sido option:selected').val() == '36'){
jQuery('#sigugun').hide();
//index를 이용해서 selected 속성(attr)추가
//기본 선택 옵션이 최상위로 index 0을 가짐
jQuery('#sigugun option:eq(1)').attr('selected', 'selected');
//trigger를 이용해 change 실행
jQuery('#sigugun').trigger('change');
}
});
//시군구 변경시 행정동 옵션추가
jQuery('#sigugun').change(function(){
//option 제거
jQuery('#dong').empty();
jQuery.each(hangjungdong.dong, function(idx, code){
if(jQuery('#sido > option:selected').val() == code.sido && jQuery('#sigugun > option:selected').val() == code.sigugun)
jQuery('#dong').append(fn_option(code.dong, code.codeNm));
});
//option의 맨앞에 추가
jQuery('#dong').prepend(fn_option('','선택'));
//option중 선택을 기본으로 선택
jQuery('#dong option:eq("")').attr('selected', 'selected');
});
jQuery('#dong').change(function(){
var sido = jQuery('#sido option:selected').val();
var sigugun = jQuery('#sigugun option:selected').val();
var dong = jQuery('#dong option:selected').val();
var dongCode = sido + sigugun + dong + '00';
});
});
function fn_option(code, name){
return '<option value="' + code +'">' + name +'</option>';
}
|
cs |
-출처:https://jsfiddle.net/zelkun/y46vhuea/4/
Edit fiddle - JSFiddle - Code Playground
jsfiddle.net
그런데 이렇게 찍으면 지역은 잘 찍어 볼 수 있는데 데이터 베이스로 값을 보내면 숫자가 찍힐 것이다. 그것은
https://zelkun.tistory.com/attachment/cfile8.uf@99BB7A3D5D45C065343307.js
를 들어가보면 알수 있듯이 코드 값으로 찍히기 때문이다.
그래서 ajax나 axios에서 코드 값이 아닌 지명을 넘기려면 위에서 찾아지는 값을 가지고 자바스크립트에서 제공하는 findIndx를 사용하여 인덱스를 찾아야한다.
|
1
2
3
|
var sidoIdx=hangjungdong.sido.findIndex(i=>i.sido==$("#sido").val());
var sigugunIdx=hangjungdong.sigugun.findIndex(i=>i.sigugun==$("#sigugun").val()&&i.sido==$("#sido").val());
var dongIdx=hangjungdong.dong.findIndex(i=>i.dong==$("#dong").val()&&i.sigugun==$("#sigugun").val()&&i.sido==$("#sido").val());
|
cs |
시도는 인덱스를 하나가지고 찾지만 시군구는 시와 시군구 값으로 검색해야 하고 동은 시, 시군구, 동값으로 찾아야 한다. 저 위의 제이슨 값이 이렇게 해야 정확한 값을 찾게 설정되어 있다.
이렇게 하면 우리가 찾고자 하는 시/도, 시/군/구, 동이 위치한 인덱스를 찾을 수 있다.
이제 이것을 가지고 우리는 값을 찾아주기만 하면 된다. 이렇게 말이다.
|
1
2
3
|
var sido = hangjungdong.sido[sidoIdx].codeNm;//시
var sigungu = hangjungdong.sigugun[sigugunIdx].codeNm;//시군구
var dong = hangjungdong.dong[dongIdx].codeNm;//동
|
cs |
이렇게하면 우리가 원하는 select box 값을 찾을 수 있다.