자바스크립트/제이쿼리 비교 (2) - 각 지역의 동네를 조회(select)
자바스크립트와 제이쿼리의 차이
자바스크립트로 작성한 코드를 제이쿼리 언어로도 표현할 수 있다. 더 짧게 줄일 수 있기에 편하게 사용 가능! (기초적인 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() | 가져오기 |