연속선택상자 - 다중 셀렉트박스

연속선택상자를 구현해 보았다. (사용예)
자바스트립트에서 역시 prototype.js를 사용했다. 이것 쓸수록 중독이 되는 것 같다.

아래 관련 소스 코드

chain_select.js (Language : javascript)

/************************************************************
 * 연속선택박스
 * 홈페이지 : http://asam.pe.kr
 * 수정일 : 2007-10-04
 * 작성자 : 아삼
 ************************************************************/

ChainSelect = function(cs_data,x_url) {
    this.cs_data = cs_data;  // 변경될 SELECT박스 데이타
    this.init_cs_data = {};  // 초기화 SELECT박스 데이타
    this.x_url = x_url;         // 정보를 얻어올 페이지
    this.sids = [];    // 관련 SELECT박스 아이디 배열
   
    // sids정보, SELECT박스 초기화
    for(sid in this.cs_data) {
        this.sids.push(sid);
        this.init_cs_data[sid] = cs_data[sid];
        this.set_select_box(sid);
    }
   
    // change 이벤트, 마지막 제외
    for(var i=0; i<this.sids.length-1; i++) {
        Event.observe(this.sids[i], 'change', this.x_set_select_box.bindAsEventListener(this));
    }
}

ChainSelect.prototype = {
    //// 변경된 다음 항목 목록을 가져 옮
    x_set_select_box: function(event) {
        var event_id = Event.element(event).id;
        var params = $H();
        var init_flag = false;
        for(var i=0; i<this.sids.length; i++) {
            params[this.sids[i]] = $F(this.sids[i]);
            if(this.sids[i] == event_id) {
                params['event_id'] = this.sids[i];
                init_flag = true;
            }
            else if(init_flag) {
                this.cs_data[this.sids[i]] = this.init_cs_data[this.sids[i]];
                this.set_select_box(this.sids[i]);
            }
        }
        var o_ms = this;
        new Ajax.Request(this.x_url, {
            method: 'post',
            encoding: '',
            parameters: params,
            onSuccess: function(transport) {
                var tmp = transport.responseText.evalJSON(true);
                o_ms.cs_data[tmp.change_id] = tmp.list;
                o_ms.set_select_box(tmp.change_id);
            }
        });
    },
   
    //// SELECT박스 데이타 갱신
    set_select_box: function(sid) {
        var select_box = $(sid);
        var value_str = '';
        select_box.innerHTML = '';
        for(var i=0; i<this.cs_data[sid].length; i++) {
            var o_option = document.createElement("option");
            select_box.options.add(o_option);
            o_option.value = this.cs_data[sid][i][0];
            o_option.innerHTML = this.cs_data[sid][i][1];
        }
    }
}

http://asam.pe.kr/test/chain_select/x_biz_list.php?biz1=1&event_id=biz1 와 같은 요청시
다음과 같이 반환하는 페이지(x_biz_list.php,x_zone_list.php)를 구현한다.

{"change_id":"biz2","list":[["","선택하세요"],["21","가구"],["25","가족"],["20","결혼"],["27","노인"],["31","분실물센터"],["26","상담"],["16","생활용품"],["23","선물, 팬시"],["29","여성"],["24","욕실용품"],["17","유아, 어린이"],["19","장례"],["22","주방용품"],["18","청소, 세탁"],["28","청소년"],["30","친목, 모임"],["32","패션, 미용"]]}

x_biz_list.php (Language : php)

<?php
header("Content-Type: text/html; charset=euc-kr");
$biz1 = iconv("utf-8", "euc-kr", $_REQUEST['biz1']);
$biz2 = iconv("utf-8", "euc-kr", $_REQUEST['biz2']);
$biz3 = iconv("utf-8", "euc-kr", $_REQUEST['biz3']);
$biz4 = iconv("utf-8", "euc-kr", $_REQUEST['biz4']);
$biz5 = iconv("utf-8", "euc-kr", $_REQUEST['biz5']);
$event_id = iconv("utf-8", "euc-kr", $_REQUEST['event_id']);
include_once 'db_config.php';
include_once 'json_encode.php';
include_once 'DB.php';
$db =& DB::connect($DSN);
$list = array();
$sql =  'SELECT id , name '.
        'FROM biz_dirs '.
        'WHERE p_id=? '.
        'ORDER BY name';

switch($event_id) {
case 'biz1':
    if(is_numeric($biz1) && $biz1 > 0) $list = $db->getAll($sql, array($biz1));
    $change_id = 'biz2';
    break;
case 'biz2':
    if(is_numeric($biz2) && $biz2 > 0) $list = $db->getAll($sql, array($biz2));
    $change_id = 'biz3';
    break;
case 'biz3':
    if(is_numeric($biz3) && $biz3 > 0) $list = $db->getAll($sql, array($biz3));
    $change_id = 'biz4';
    break;
case 'biz4':
    if(is_numeric($biz4) && $biz4 > 0) $list = $db->getAll($sql, array($biz4));
    $change_id = 'biz5';
    break;
}
if($change_id != '') {
    if(count($list) > 0) array_unshift($list, array('','선택하세요'));
    else array_unshift($list, array('','----------')); 
    echo json_encode2(array('change_id'=>$change_id,'list'=>$list));
}
//// DB연결 종료
$db->disconnect();
?>

x_zone_list.php (Language : php)

<?php
header("Content-Type: text/html; charset=euc-kr");
$zone1 = iconv("utf-8", "euc-kr", $_REQUEST['zone1']);
$zone2 = iconv("utf-8", "euc-kr", $_REQUEST['zone2']);
$event_id = iconv("utf-8", "euc-kr", $_REQUEST['event_id']);
include_once 'db_config.php';
include_once 'json_encode.php';
include_once 'DB.php';
$db =& DB::connect($DSN);
switch($event_id) {
case 'zone1':
    $sql =  'SELECT zone2 v, zone2 t '.
            'FROM zipcodes '.
            'WHERE zone1=? '.
            'GROUP BY zone2';
    $list = $db->getAll($sql, array($zone1));
    array_unshift($list, array('','--구 선택--'));
    $change_id = 'zone2';
    break;
case 'zone2':
    $sql =  'SELECT zone3 v, zone3 t '.
            'FROM zipcodes '.
            'WHERE zone2=? AND zone1=? AND zone3\!=? '.
            'GROUP BY zone3';
    $list = $db->getAll($sql, array($zone2,$zone1,''));
    array_unshift($list, array('','--동 선택--'));
    $change_id = 'zone3';
    break;
}
if($change_id != '') {
    echo json_encode2(array('change_id'=>$change_id,'list'=>$list));
}
//// DB연결 종료
$db->disconnect();
?>

http://blog.asam.pe.kr/13