004. jQuery [시도/시군구/읍면동]을 이용한 selectbox 제어 with 기상청 동네예보

programing/jQuery&HTML5

by ZelKun 2022. 2. 9. 09:00

004. jQuery [시도/시군구/읍면동]을 이용한 selectbox 제어 with 기상청 동네예보

꽤 오래전에 jQuery selectbox 예제가 뭐가 있을까 싶어, 기상청 동네예보를 곁들인 제어 예제를 올렸었는데..

002. jQuery 셀렉트박스 제어 예제 select box control example

기초적인건 그만 하고 쓸만한걸 해볼까 합니다 jQuery를 이용해 셀렉트 박스 제어해보기 대략적인 계획은 다음과 같습니다 1. 대/중/소 분류 변경이 가능하게 2. option을 동적으로 추가 3. 소분류가

zelkun.tistory.com

출처도 없이...

포스팅한 글을 봐서 다시한번 정리해봤다

https://gotoheightlevel.tistory.com/2

제이쿼리를 이용한 시/도, 시/군/읍, 동/리 select box

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> jQuery Select Example 선택 선택 ..

gotoheightlevel.tistory.com

불펌하신분... 블로그

시도, 시군구, 읍면동인데 그 마저도 틀리셨다

거기에 텍스트를 불러오기 위해... 뻘짓을 하셔서 혼란스럽다..

안쓰러워...

기존에 업로드한 소스를 일부 수정해서

이번엔 텍스트도 표시 할 수 있도록 수정만했다

~~왜냐면.. 불펌인주제에 좋아요가 원글보다 많다..~~

단순히 텍스트만 원한다면

저 블로그 보다는

새로 올리는 예제를 참고하길 바라며...

이번에도 [시도/시군구/읍면동] 을 전부 선택해야 동작한다

하나씩 선택할때마다 텍스트를 변경해주는것도 나쁘진 않겠지만

어짜피 동네예보 호출은 읍면동을 선택핼때 발생하니 한번에 처리해주는게 좋다

읍면동 코드관련은 이전글을 참고

<!-- https://zelkun.tistory.com/entry/004-jQuery-시도시군구읍면동을-이용한-selectbox-제어-with-기상청-동네예보 -->
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8" />
	<title>jQuery Select Example</title>
	<style>
		div.contents {
			text-align: center;
			padding-bottom: 10px;
		}
	</style>
	<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>
	<script type="application/javascript">
		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');
				var sigugun = jQuery('#sigugun option:selected');
				var dong = jQuery('#dong option:selected');

				var dongName = sido.text() + '/' + sigugun.text() + '/' + dong.text(); // 시도/시군구/읍면동 이름
				jQuery('#dongName').text(dongName);

				var dongCode = sido.val() + sigugun.val() + dong.val() + '00'; // 읍면동코드
				jQuery('#dongCode').text(dongCode);
				//동네예보 URL
				var url = 'https://www.weather.go.kr/weather/process/timeseries-dfs-body-ajax.jsp?myPointCode=' + dongCode + '&unit=K';
				//iframe으로 결과 보기
				fn_iframe(url);
			});
		});

		function fn_option(code, name) {
			return '<option value="' + code + '">' + name + '</option>';
		}
		function fn_iframe(url) {
			jQuery('#iframe').attr('src', url);
		}
	</script>
</head>
<body>
	<div class="contents">
		<select id="sido"><option value="">선택</option></select>
		<select id="sigugun"><option value="">선택</option></select>
		<select id="dong"><option value="">선택</option></select>
		<div>
			텍스트: <span id="dongName"></span><br/>
			코드: <span id="dongCode"></span>
		</div>
	</div>
	<div class="main">
		<iframe id="iframe" style="width:100%; height:500px;"></iframe>
	</div>
</body>
</html>

소스코드를 예전걸보니 JSFiddle에 올려놓은거랑 달라서 수정을 할까하다가

기능적인건 차이없으니 그대로 두었다

이번엔 dongName, dongCode 라는 span을 추가해서

거기에 선택한 읍면동 이름/코드를 표시하도록 했다

읍면동 항목이 변경(change) 되면 동네예보 url을 호출하고, 텍스트를 출력해준다

var sido = jQuery('#sido option:selected');
var sigugun = jQuery('#sigugun option:selected');
var dong = jQuery('#dong option:selected');

console.log('시도:', sido.text(), ' 코드:', sido.val());
console.log('시군구:', sigugun.text(), ' 코드:', sigugun.val());
console.log('읍면동:', dong.text(), ' 코드:', dong.val());

사실 소스에는 console을 안넣어 놨지만, 대충 느낌으로 알거같으니 패스

보면 select object 자체를 sido에 담고

코드명을 사용할때는 .val()

텍스트를 사용할때는 .text()

로 받아오는걸 볼수 있다

위의 불펌 블로그처럼 index가 몇번인지를 체크해서

json 원데이터를 탐색할 이유가 없다

실행가능한 예제(Example): https://jsfiddle.net/zelkun/y46vhuea/5/

Edit fiddle - JSFiddle - Code Playground

jsfiddle.net

기본적인 코드긴한데, 작성한 성의를 봐서라도

퍼가실때는 출처를 표시해주시기 바랍니다

저작자표시 비영리 동일조건

'programing > jQuery&HTML5' 카테고리의 다른 글

005. jQuery [시도/시군구/읍면동]을 이용한 selectbox 제어 submit 사용에도 option 유지 (2)	2023.09.17
input type="text" 자동완성 끄기 (autocomplete="off") (0)	2021.04.30
jQuery HTML Character Entity 특수문자 치환 & (0)	2019.11.30
003. jQuery ID중복과 라디오 박스 사용 예제 radio box control example (0)	2019.08.25
002. jQuery 셀렉트박스 제어 예제 select box control example (2)	2019.08.04

Tsunami

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문

'programing > jQuery&HTML5' 카테고리의 다른 글

관련글 더보기

댓글 영역

추가 정보

인기글

최신글

티스토리툴바