상세 컨텐츠

본문 제목

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

programing/jQuery&HTML5

by ZelKun 2019. 8. 4. 23:39

본문

반응형

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

 

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

꽤 오래전에 jQuery selectbox 예제가 뭐가 있을까 싶어, 기상청 동네예보를 곁들인 제어 예제를 올렸었는데.. 002. jQuery 셀렉트박스 제어 예제 select box control example 002. jQuery 셀렉트박스 제어 예제 selec

zelkun.tistory.com

기초적인건 그만 하고 쓸만한걸 해볼까 합니다

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/

 

Edit fiddle - JSFiddle

 

jsfiddle.net

실행가능한 예제로 선택박스(select box)에 들어갈 데이터는 이미 json으로 받아오고

셀렉트 박스 변경시 전부 동적으로 처리가 되도록 구성했다

json으로 데이터 만드는 시간이 코드짜는것보다 더걸린건 안비밀...

 

특히 세종특별자치시를 선택하면 중분류 명이 세종특별자치시가 한번더 나오기때문데

hide 옵션을 줘서 셀렉트박스를 가리는 로직도 넣었다

remove 로 삭제해도 되긴 하지만.. 그럼 다른 도시로 변경하면 복구하기가 난감해지기 때문이긴 한다

 

select 박스를 다시 만들수 있으니 상관없었을것 같기도 하다

jQuery('#selectbox').html('<select id="sido"/><select id="sigugun"/><select id="dong"/>');


가능하면 많은 옵션을 사용하려고 했는데 그러질 못해서 조금 아쉽다

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

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

input type="text" 자동완성 끄기 (autocomplete="off")  (0) 2021.04.30
jQuery HTML Character Entity 특수문자 치환 &amp;  (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

관련글 더보기

댓글 영역

티스토리툴바