자바스크립트를 이용한 DB연동 동적 SELECT 상자 만들기 오늘은 자바스크립트를 이용 두 개의 SELECT 상자의 목록이 동적으로 바뀌는 걸 한번 만들어 보도록 하겠습니다. 예를 들어 다음 과 같은 테이블이 있다고 할 때 팀을 선택하면 해당 팀의 팀원만 출력 되는 경우가 되겠지요.
+----+----------+-----------+ | id | team_nm | member_nm | +----+----------+-----------+ | 1 | 인터넷팀 | 이종민 | | 2 | 인터넷팀 | 김세진 | | 3 | 인터넷팀 | 김형주 | | 4 | 인터넷팀 | 김세진 | | 5 | 인터넷팀 | 정진호 | | 6 | 총무팀 | 이상범 | | 7 | 총무팀 | 이정철 | | 8 | 총무팀 | 이미경 | | 9 | 총무팀 | 천경희 | | 10 | 총무팀 | 김창수 | | 11 | 기술지원 | 김영호 | | 12 | 기술지원 | 한진영 | | 13 | 기술지원 | 김동민 | +----+----------+-----------+ 먼저 데모를 한번 보시는 것이 빠르겠지요? DEMO : /test/select.html 클라이언트 서버 환경에서 4GL(VB,델파이 파워빌더)을 이용 OnChange 이벤트를 잡아내는 것이 아주 쉽지만 WEB기반 에서는 사정이 아주 다릅니다. 왜냐하면 두 개중 하나의 상자의 값에 변화가 생기면 반드시 서버에 그 값을 보내야 하고 그 값을 기반으로 다시 두 번째 상자를 만들기 위해 리로드를 해야 하기 때문이지요. 보통 하나의 SELECT 상자를 만드는 것은 그리 어려운 것이 아니구요 그냥
을 $row 크기 만큼 뿌려주면 됩니다. 그러나 2개의 선택상자라면 앞서 말씀드린 바와 같이 하나의 SELECT 상자 'A'에서 발생한 이벤트를 기본으로 다른 SELECT 상자'B'의 목록을 변경시키려면 반드시 서버에 'A'에서 선택한 값을 전달해 주어서 'B'를 다시 만들어 내야 합니다. 이때 필수적인게 바로 해당 페이지의 RELOAD 이구요. 당연히 화면이 다시 만들어 지고 속도도 느려 지겠지요? 또 다른 방법은 리로드가 일어나는 페이지만 프레임으로 작게 나누어서 전체 페이지를 읽지 않고 해당 프레임만 다시 읽는 방법이 있지만 여전히 DB에 Connect 해서 다시 목록을 읽어와야 하는 것은 마찬가지 이구요. http://www.kt114.co.kr/ 의 주소찾기에서 사용되는 방법이지요 여기서 만들어 보려는 것은 A SELECT에서 선택가능한 항목과 그 항목에 따른 선택 사항을 애초에 한꺼번에 가져와 SELECT 상자의 목록으로 만들어 가지고 있게 하려는 겁니다. 위의 예제에서는
teamlist : 폼이름 team_nm : 팀선택 상자의 이름 member_nm : 팀원선택 상자의 이름
이구요 teamlist 폼에서 팀선택 상자가 변하면 팀원선택 상자의 목록의 내용 member_nm.options[].text 과 member_nm.options[].value을 변경 시켜주는 것이 주요 로직입니다.
test DB 에 team 테이블을 하나 만들고 팀원을 입력합니다. [root@sera bin]# mysql test
그리고 SQL은 아래와 같습니다. ------ CREATE TABLE team ( id int , team_nm char(20), member_nm char(20), PRIMARY KEY (id) ); INSERT INTO team VALUES (1,'인터넷팀','이종민'); INSERT INTO team VALUES (2,'인터넷팀','김세진'); INSERT INTO team VALUES (3,'인터넷팀','김형주'); INSERT INTO team VALUES (4,'인터넷팀','김세진'); INSERT INTO team VALUES (5,'인터넷팀','정진호'); INSERT INTO team VALUES (6,'총무팀','이상범'); INSERT INTO team VALUES (7,'총무팀','이정철'); INSERT INTO team VALUES (8,'총무팀','이미경'); INSERT INTO team VALUES (9,'총무팀','천경희'); INSERT INTO team VALUES (10,'총무팀','김창수'); INSERT INTO team VALUES (11,'기술지원','김영호'); INSERT INTO team VALUES (12,'기술지원','한진영'); INSERT INTO team VALUES (13,'기술지원','김동민'); ------------- 그럼 아래 소스를 참고하시고 재미있는 코드 많이 만들어 보시기를
