최신글: 004. jQuery [시도/시군구/읍면동]을 이용한 selectbox 제어 with 기상청 동네예보
기초적인건 그만 하고 쓸만한걸 해볼까 합니다
jQuery를 이용해 셀렉트 박스 제어해보기
대략적인 계획은 다음과 같습니다
1. 대/중/소 분류 변경이 가능하게
2. option을 동적으로 추가
3. 소분류가 바뀌면 실행
근데 대/중/소를 하려보니까 마땅한게 생각이 안나..
기상청 동네예보나 응용해보기로했다
대: 시도 단위 / 중: 구 단위 / 소: 동 단위
행정동 데이터는 주민등록주소코드 변경내역(2019.07.01.시행) 을 참고했다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>Example page</title>
<style>
div {
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(){
jQuery('#table1').css('color', 'red');
jQuery('#table_header').css('font-size', '30pt');
jQuery('#table2 td:first-child').css('color', 'blue');
//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';
//동네예보 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>
<h3>Example page</h3>
<div>
<div id="selectbox">
<select id="sido"></select>
<select id="sigugun"></select>
<select id="dong"></select>
</div>
<div>
<iframe id="iframe" style="width:100%; height:500px;"></iframe>
</div>
</div>
</body>
</html>
example: https://jsfiddle.net/zelkun/y46vhuea/4/
실행가능한 예제로 선택박스(select box)에 들어갈 데이터는 이미 json으로 받아오고
셀렉트 박스 변경시 전부 동적으로 처리가 되도록 구성했다
json으로 데이터 만드는 시간이 코드짜는것보다 더걸린건 안비밀...
특히 세종특별자치시를 선택하면 중분류 명이 세종특별자치시가 한번더 나오기때문데
hide 옵션을 줘서 셀렉트박스를 가리는 로직도 넣었다
remove 로 삭제해도 되긴 하지만.. 그럼 다른 도시로 변경하면 복구하기가 난감해지기 때문이긴 한다
select 박스를 다시 만들수 있으니 상관없었을것 같기도 하다
jQuery('#selectbox').html('<select id="sido"/><select id="sigugun"/><select id="dong"/>');
가능하면 많은 옵션을 사용하려고 했는데 그러질 못해서 조금 아쉽다
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 |
001. jQuery 선택자(SELECTOR) 사용과 예제 (0) | 2019.08.03 |
000. jQuery 사용 준비 및 간단한 예제 (0) | 2019.08.03 |
댓글 영역