개발일지/JavaScript + jquery

자바스크립트/제이쿼리 비교 (2) - 각 지역의 동네를 조회(select)

연습용365 2021. 11. 7. 13:27

 

 

자바스크립트와 제이쿼리의 차이

자바스크립트로 작성한 코드를 제이쿼리 언어로도 표현할 수 있다. 더 짧게 줄일 수 있기에 편하게 사용 가능! (기초적인 html 기능들은 따로 설명하지 않음) 연습 이름 : 지역 : 서울

practice365.xyz

 

저번 글에 이어서 ...

 

 

이번엔 동네까지 추가를 해본다. 서울이 디폴트 상태이니까 서울의 동네를 표시하고 내가 다른 지역을 선택하면 서울의 동네가 지워지고 내가 선택한 지역의 동네를 보여주는 코드!

 

 

 

 


자바스크립트 버전

<body>
    <div>
        <div>이름 : <input type="text" id="name" /></div>
        <div>
            지역 : 
            <select id="city" onchange="changeCity();"> 
                <option value="02" selected>서울</option>
                <option value="032">인천</option>
            </select>
        </div>
        <div>
            동네 :
            <select id="region_02">
                <option value="">강남</option>
                <option value="">서초</option>
            </select>
            <select id="region_032" style="display: none;">
                <option value="">부평</option>
                <option value="">학익</option>
            </select>
        </div>
        <button onclick="ok();">제출</button>
    </div>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        function ok()
        {
            // alert(document.getElementById("name").value);
            // alert(document.getElementById("city").value);
            alert($("#name").val());
            alert($("#city").val());
        }

        function changeCity(){
            var city = document.getElementById("city").value; //02, 032
            document.getElementById("region_02").style.display = "none";
            document.getElementById("region_032").style.display = "none";
            document.getElementById("region_" + city).style.display = "";
        }
    </script>
</body>

	<div>
            동네 :
            <select id="region_02">
                <option value="">강남</option>
                <option value="">서초</option>
            </select>
            <select id="region_032" style="display: none;">
                <option value="">부평</option>
                <option value="">학익</option>
            </select>
	</div>

 

아래에서 함수를 만들기 위해 각 select id를 설정할 때 "region_"까지는 맞추고 뒤에 오는 숫자에 지역번호를 넣는다. 

 

 

style = "display: none;"

디폴트 동네가 아니라면 일단 숨겨본다.

 

지금 상태에서는 인천을 선택해도 인천의 동네가 숨겨져 있기 때문에 서울 동네만 계속 표시가 됨. 때문에 다른 지역을 선택했을 때 동네가 바뀌는 함수를 만들어야 한다.

 

 

	<div>
            지역 : 
            <select id="city" onchange="changeCity();"> 
                <option value="02" selected>서울</option>
                <option value="032">인천</option>
            </select>
        </div>

 

다른 지역을 눌렀을 때 그 동네가 나오도록 기능을 주는 거니까 지역 부분의 select에서 onChange=""를 넣어줘야한다. 새로 만들 함수의 이름은 changeCity(); 

 

 

function changeCity(){
            var city = document.getElementById("city").value; //02, 032
            document.getElementById("region_02").style.display = "none";
            document.getElementById("region_032").style.display = "none";
            document.getElementById("region_" + city).style.display = "";
            //아무값을 안 넣으면 보여주고, none을 넣으면 숨긴다.
        }

 

changeCity(); 함수

 

var city = document.getElementById("city").value;

변수 설정을 해준다. city의 value값을 갖고 온다면? 현재 코드에서는 02, 032 두 가지의 값이 옴

 

document.getElementById("region_" + city).style.display = "";

가장 마지막에 있는 코드부터 보면 변수 설정한 city의 값을 "region_" 뒤에 넣음. 이렇게 함수를 만들기 위해서 위쪽에서 id를 이렇게 결정한 것이다. syle.display = ""; 아무값을 넣지 않으면 blank로 인식해서 내가 지역을 선택하게 되면 그 선택된 값의 동네가 화면에 보여주게 됨

 

하지만!! 이것만 있으면 디폴트로 정해둔 지역과 함께 보이기 때문에 다른 지역들은 꺼줘야한다. 그래서 중간에 다음 코드가 와야 하는 것 

 

            document.getElementById("region_02").style.display = "none";
            document.getElementById("region_032").style.display = "none";

 

~~.style.display = "none";

이 코드가 오게 되면 화면에서 숨긴다는 뜻이니까 정상적으로 작동을 하게 됨!

 

 


제이쿼리 버전

        function changeCity(){
            var city = $('#city').val();
            $('#region_02').hide();
            $("#region_032").hide();
            $("#region_" + city).show();
        }

 

좀 더 간결해진 걸 볼 수 있돠~

 

jquery method(); 기능
val() 가져오기
hide() 숨기기
show() 가져오기