이제 슬슬 서버사이드 언어인 PHP 와 jQuery 를 함께 사용하는 예제를 다루어 보도록 하겠습니다.
이번 강좌에서는 Select 필드의 항목이 변경되면 다른 필드가 동적으로 변경되는것을 해보도록 하겠습니다.
이 예제는, 여러 사이트의 회원가입 양식에서 보셨을텐데요. 예로, 내가 해당하는 국가를 선택하면 그에 따른 도시명들이 나열되는 select 필드가 동적으로 생성되는 예제입니다.
1. 먼저, Client Language 를 살펴보고, (jQuery 와 Html)
2. Server-side code 를 살펴본다음,
3. 코드에 대한 설명을 하도록 하겠습니다.
1. jQuery & html Code
<script src="../jquery.js.txt" type="text/javascript"></script>
<script type="text/javascript">
function setup_country_change(){
//나라가 바뀌는지 이벤트를 감지함.
//문서가 ready 되면 실행되는 콜백 함수
$('#country').change(update_cities);
}
function update_cities(){
//선택된 나라를 country 변수에 저장한다.
var country = $('#country').attr('value');
//나라가 선택되면 get_city.php 함수 실행
//데이터가 반환되면 show_cities() 함수가 실행된다.
$.get('get_cities.php?country='+country,show_cities);
}
function show_cities(res){
//get_cities.php 에 의해 데이터가 반환되면 res로 받아옵니다.
//필드를 변경한다.
$('#cities').html(res);
}
//문서가 로드 완료되면 setup_country_change() 함수를 실행한다.
$(document).ready(setup_country_change);
</script>
</head>
<body>
<h1>웹눈의 jQuery 강좌 6 - Select 필드 동적으로 변경하기</h1>
<h3>이 강좌는 'http://webnoon.net - 웹눈의 웹이야기' 블로그에서 보실수 있습니다.</h3>
<form id="select_country" name="select_country" method="" action="#">
<table>
<tr>
<th>Country</th>
<td>
<select name="country" id="country">
<option value="" selected="selected">나라를 선택해주세요.</option>
<option value="ko">한국</option>
<option value="us">미국</option>
<option value="uk">영국</option>
</select>
</td>
</tr>
<tr>
<th>Cities</th>
<td id="cities">나라를 먼저 선택해주시기 바랍니다.</td>
</tr>
</table>
</form>
</body>
<?php
switch($_REQUEST['country'])
{
case "ko":
$cities = array('서울','대전','부산','대구');
break ;
case "us":
$cities = array('New york','Cicago','L.A','또 뭐가 있니');
break ;
case "uk":
$cities = array('London','도시1','도시2','도시3');
break;
default :
$cities = false ;
break;
}
if(!$cities) echo "나라를 선택해 주시와요.";
else echo "<select name='city'><option>".
join('</option><option>',$cities).
'</option></select>';
?>
3. 코드에 대한 설명
먼저, 전체적인 그림을 잡아보도록 하지요.
사용자가 하는 행위를 생각해 보면, 우선 나라를 선택을 하게 될것입니다.. 이런 행위를 프로그래밍에서는 '이벤트가 발생한다' 고 하는데요, 즉, 사용자가 나라를 선택하는 행위의 발생을 말합니다.
그러면 우리가(코더 혹은 프로그래머)가 해야 할 일은 이러한 사용자의 행위(이벤트) 의 발생을 감지해서 그에 따른 적절한 조치들을 취해야 겠지요? 이번 예제에서는 선택하는 이벤트가 발생하면 해당 국가의 도시명들을 가지고 오는 작업을 해주어야 하겠습니다.
그럼 1번 jQuery 코드를 살펴보면, 사용자의 이벤트를 감지하는 코드를 볼수가 있습니다. 무엇이냐구요? 바로
setup_country_change() 함수 안에 있는
$('#country').change(update_cities) 부분이 사용자의 이벤트를 감지하는 부분입니다.
$('#country') 라는 'Object(객체)' 에 변화(change) 가 감지되면 update_cities 라는 콜백 함수를 실행하라는 내용이지요. html 코드를 보면 id가 country 로 되어 있는 부분이 select box 로 되어있는것을 알수 있습니다. 즉, 사용자가 select box를 선택(변경) 하면 발생하는 이벤트를 감지해서
update_cities() 라는 함수를 실행한다는 내용입니다.
그럼 변화가 발생하면 실행되는 함수인
update_cities() 함수를 살펴보도록 하지요.
이 함수는 어느 나라가 선택되어졌는지 확인하고, 서버사이드 언어인 PHP에 선택되어진 나라 정보를 전송하게 됩니다.
v
ar country = $('#country').attr('value'); 이 부분이 선택되어진 나라를 변수에 저장하는 부분입니다. select box를 보면 option 마다 속성값이 있는것을 볼수 있는데, 이것이 선택될때마다 #country 객체의 value 값이 바뀌게 됩니다.
만약, '한국'을 선택했다면 country 변수에는 'ko'라는 값이 할당이 되겠지요?
이제 이 예제의 핵심적인 부분을 살펴 보도록 하겠습니다.
$.get('get_cities.php?country='+country,show_cities); 이 부분은 get_cities.php 인 서버측에 선택되어진 나라 정보를 전송하고나서 get_cities.php로 부터 제공되어지는 데이터를 retrieve(되돌려 전송) 받습니다.
선택되어지 나라 정보를 get 방식으로 전송한다는것을 알수 있지요?
$.get() 함수는 두개의 매개변수를 전달 받는데, 첫번째에는 데이터를 전송/수신 할 php 주소를, 두번째는 서버로부터 데이터를 전송받으면 실행할 콜백 함수를 정의합니다. 뭐.. 간단하지요?
마지막으로 show_cities()함수를 살펴보도록 하지요.
show_cities() 함수는 $.get에 의해 불리어지는 함수인데, 서버측에서 제공하는 데이터를 매개변수로 받습니다.
즉, show_cities(res){} 식으로 사용하는데, res에는 서버에서 전송하는 데이터 정보가 담겨져 있지요.
이렇게 서버로부터 전송받은 데이터를 $('#cities').html(res); 와 같은 식으로 #cities 필드의 html 값을 변경시키는 것입니다.
그럼 이제, 서버측 언어를 살펴보도록 하지요. 대충 어떻게 되어있을지 감이 오지 않나요?
네, 간단합니다. $.get에서 전송한 나라 정보를 switch문을 사용해서 판별한다음에,
그에 맞는 도시명들을 반환하는 역할을 하고 있습니다.
여기서는 DB와 연동 하지는 않았지만, DB와도 문제없이 사용할수 있겠지요?
그럼 강좌는 여기서 마치도록 하겠습니다.
p.s - 예제 소스는 파일로 첨부하였으니, 다운받아서 실행해 보시기 바래요. 질문은 언제나 환영입니다~
dynamicSelectBox.zip
slidemenu.htm
