지역 선택 (js+checkbox+select)

setting.js

/***************************************************************************
*
*        Date            : 2004-12-24
*        Copyright        : aucd29
*        E-mail            : aucd29@daum.net
*        Type            :
*
*        지역 설정을 쉽게 해보도록 하자.
*
***************************************************************************/

//
// select 에서 선택된 것을 바탕으로 CityData.js를 참조하여 하위 Area를 보여준다.
//
function Next(n,val)
{
    var str,len,k=0;
    if(n==0) return;    // 첫번째 선택했으면

    len = cat2_info0[n].length;
    var chk3;
    var j = 1;

    // 전국이 체크 되었는지 확인
    var chk = Checked('전국')?'CHECKED':'';
    str = "<input id='BoxAll' type='checkbox' name='sCity2[]' value='전국' onClick=Clicked(this,"+n+",'"+val+"') "+chk+" />전국";

    // 도 지역일경우 해당 도를 선택했는지
    var chk2 = Checked(val)?'CHECKED':'';
    if(n>7)
    {
        chk2 = chk=='CHECKED'?'DISABLED':chk2;
        str += "<input id='BoxBig' type='checkbox' name='sCity2[]' value='"+val+"'";
        str += " onClick=Clicked(this,"+n+",'"+val+"') "+chk2+" />"+val;
    }
    for(var i=0; i<len; ++i)
    {
        // 상위 것들 체킹
        // 여기서 상위가 체크되면 하위는 자동으로 disabled 시킨다.
        chk3 = Checked(cat2_info0[n][i].name)?'CHECKED':'';
        chk3 = chk2=='CHECKED'?'DISABLED':chk3;
        chk3 = chk=='CHECKED'?'DISABLED':chk3;

        str += "<input id='Box_"+n+"_"+i+"' type='checkbox' name='sCity2[]' value='"+cat2_info0[n][i].name+"'";
        str += " onClick=Clicked(this,"+n+",'"+val+"') "+chk3+" />"+cat2_info0[n][i].name;

        if(j%7==0&&!k || j%10==0&&k) { k=1; j=1; str += "<br>"; }
        ++j;
    }
    document.getElementById('ChkBox').innerHTML = str;
}

//
// 해당하는 객체가 선택된 것인지 아닌지를 확인
//
function Checked(str)
{
    var z;
    var len2 = selectBox.length;
    if(len2 > 0)
    {
        for(z=0;z<len;++z)
        {
            if(selectBox[z]==str)
            {
                return true;
            }
        }
    }
    return false;
}

//
// 체크박스를 선택했을 때 발생하는 이벤트를 조정
//
function Clicked(obj,n,val)
{
    var len = selectBox.length;
    var tmp = new Array();
    var tmp2 = new Array();

    var data,rechk;
    if(len > 4&&obj.checked == true)
    {
        alert('5개 이상을 선택하실 수 없습니다.');
        obj.checked = false;
        return false;
    }
    data = obj.value;
    //if(obj.value == '전국')
    //else
    //data = p.value+'('+obj.value+')';
    //alert(obj+','+n+','+val);
    //alert(obj.id);                        object identity

    // 이곳에서 rechk가 존재하면 선택했던 것을 다시 선택하게 된것으로
    // 해당 객체를 없앤다.
    for(i=0; i<len; ++i)
    {
        if(selectBox[i]==data) rechk = true;
    }

    if(rechk != true)
    {
        selectBox[len] = data;
        identity[len] = obj.id;
    }
    else
    {
        var j=0;
        for(i=0; i<len; ++i)
        {
            if(selectBox[i]!=data)
            {
                tmp[j] = selectBox[i];
                tmp2[j] = identity[i];
                ++j;
            }
        }
        obj.checked = false;

        selectBox = null;
        identity = null;
        selectBox = tmp;
        identity = tmp2;
    }

    ClickedPrint(n,val);

    if(    data=='전국'||data=='전남'||data=='전북'||data=='경기'||data=='충남'||
        data=='충북'||data=='강원'||data=='경남'||data=='경북'||data=='제주')
    {
        Next(n,val);
    }
}

//
// 선택된 객체를 하단에 뿌려주는 역할을 한다.
//
function ClickedPrint(n,val)
{
    var len = selectBox.length;
    //alert(len);
    var str = '';
    for(i=0; i<len; ++i)
    {
        if(i==0)
            str = "<a href=javascript:RemoveArea('"+selectBox[i]+"',"+n+",'"+val+"')>"+selectBox[i];
            //str = selectBox[i];
        else
            str += ", <a href=javascript:RemoveArea('"+selectBox[i]+"',"+n+",'"+val+"')>"+selectBox[i];
            //str += ", "+selectBox[i];
        str += "<input type='hidden' name='area[]' value='"+selectBox[i]+"' />";
    }
    document.getElementById('SelectBox').innerHTML=str;
}

//
// 하단에 뿌려져 있는 Text를 선택시 checkbox를 disabled시키고 text를 remove한다.
//
function RemoveArea(box,n,val)
{
    var len = selectBox.length;
    var j = 0;
    var tmp = new Array();
    //var tmp2 = new Array();

    for(var i=0; i<len; ++i)
    {
        if(selectBox[i]!=box)
        {
            tmp[j] = selectBox[i];
            //tmp2[j] = identity[i];
            ++j;
        }
    }
    selectBox = tmp;
    //identity = tmp2;

    Next(n,val);
    ClickedPrint(n,val);
}

//
// submit checking
//
function Checking(obj)
{
    var len = obj.elements['type'].length;
    var chk = 0;

    for(i=0; i<len; ++i)
    {
        if(obj.elements['type'][i].checked == true) ++chk;
    }

    if(!chk)
    {
        alert('관심종목을 선택하세요');
        obj.elements['type[0]'].focus();
        return false;
    }

    if(obj.elements['amount_t'].selectedIndex >= 1 && !obj.elements['amount'].value)
    {
        alert('금액을 입력하세요');
        obj.elements['amount'].focus();
        return false;
    }

    return true;
}

// CityData ---------------------------------------------------------------------------------------

var cat1_info0 = new Array;
var cat2_info0 = new Array;
var cat2_num0 = new Array;


    cat1_info0[1] = { serial:'1', name:'서울' };
    cat1_info0[2] = { serial:'2', name:'부산' };
    cat1_info0[3] = { serial:'3', name:'대구' };
    cat1_info0[4] = { serial:'4', name:'인천' };
    cat1_info0[5] = { serial:'5', name:'광주' };
    cat1_info0[6] = { serial:'6', name:'대전' };
    cat1_info0[7] = { serial:'7', name:'울산' };
    cat1_info0[8] = { serial:'8', name:'강원' };
    cat1_info0[9] = { serial:'9', name:'경기' };
    cat1_info0[10] = { serial:'10', name:'경남' };
    cat1_info0[11] = { serial:'11', name:'경북' };
    cat1_info0[12] = { serial:'12', name:'전남' };
    cat1_info0[13] = { serial:'13', name:'전북' };
    cat1_info0[14] = { serial:'14', name:'제주' };
    cat1_info0[15] = { serial:'15', name:'충남' };
    cat1_info0[16] = { serial:'16', name:'충북' };

    cat2_info0[1] = new Array;
        cat2_info0[1][0] = { serial:'0', name:'서울특별시' };
    cat2_num0[1] = 25;

    cat2_info0[2] = new Array;
        cat2_info0[2][0] = { serial:'0', name:'부산광역시' };
    cat2_num0[2] = 16;


    cat2_info0[3] = new Array;
        cat2_info0[3][0] = { serial:'0', name:'대구광역시' };
    cat2_num0[3] = 8;


    cat2_info0[4] = new Array;
        cat2_info0[4][0] = { serial:'0', name:'인천광역시' };
    cat2_num0[4] = 10;


    cat2_info0[5] = new Array;
        cat2_info0[5][0] = { serial:'0', name:'광주광역시' };
    cat2_num0[5] = 5;


    cat2_info0[6] = new Array;
        cat2_info0[6][0] = { serial:'0', name:'대전광역시' };
    cat2_num0[6] = 5;


    cat2_info0[7] = new Array;
        cat2_info0[7][0] = { serial:'0', name:'울산광역시' };
    cat2_num0[7] = 5;


    cat2_info0[8] = new Array;
        cat2_info0[8][0] = { serial:'0', name:'강릉' };
        cat2_info0[8][1] = { serial:'1', name:'동해' };
        cat2_info0[8][2] = { serial:'2', name:'삼척' };
        cat2_info0[8][3] = { serial:'3', name:'속초' };
        cat2_info0[8][4] = { serial:'4', name:'원주' };
        cat2_info0[8][5] = { serial:'5', name:'춘천' };
        cat2_info0[8][6] = { serial:'6', name:'태백' };
        cat2_info0[8][7] = { serial:'7', name:'고성' };
        cat2_info0[8][8] = { serial:'8', name:'양구' };
        cat2_info0[8][9] = { serial:'9', name:'양양' };
        cat2_info0[8][10] = { serial:'10', name:'영월' };
        cat2_info0[8][11] = { serial:'11', name:'인제' };
        cat2_info0[8][12] = { serial:'12', name:'정선' };
        cat2_info0[8][13] = { serial:'13', name:'철원' };
        cat2_info0[8][14] = { serial:'14', name:'평창' };
        cat2_info0[8][15] = { serial:'15', name:'홍천' };
        cat2_info0[8][16] = { serial:'16', name:'화천' };
        cat2_info0[8][17] = { serial:'17', name:'횡성' };
    cat2_num0[8] = 18;


    cat2_info0[9] = new Array;
        cat2_info0[9][0] = { serial:'0', name:'고양' };
        cat2_info0[9][1] = { serial:'1', name:'과천' };
        cat2_info0[9][2] = { serial:'2', name:'광명' };
        cat2_info0[9][3] = { serial:'3', name:'구리' };
        cat2_info0[9][4] = { serial:'4', name:'군포' };
        cat2_info0[9][5] = { serial:'5', name:'김포' };
        cat2_info0[9][6] = { serial:'6', name:'남양주' };
        cat2_info0[9][7] = { serial:'7', name:'동두천' };
        cat2_info0[9][8] = { serial:'8', name:'부천' };
        cat2_info0[9][9] = { serial:'9', name:'성남' };
        cat2_info0[9][10] = { serial:'10', name:'수원' };
        cat2_info0[9][11] = { serial:'11', name:'시흥' };
        cat2_info0[9][12] = { serial:'12', name:'안산' };
        cat2_info0[9][13] = { serial:'13', name:'안성' };
        cat2_info0[9][14] = { serial:'14', name:'안양' };
        cat2_info0[9][15] = { serial:'15', name:'오산' };
        cat2_info0[9][16] = { serial:'16', name:'용인' };
        cat2_info0[9][17] = { serial:'17', name:'의왕' };
        cat2_info0[9][18] = { serial:'18', name:'의정부' };
        cat2_info0[9][19] = { serial:'19', name:'이천' };
        cat2_info0[9][20] = { serial:'20', name:'파주' };
        cat2_info0[9][21] = { serial:'21', name:'평택' };
        cat2_info0[9][22] = { serial:'22', name:'하남' };
        cat2_info0[9][23] = { serial:'23', name:'가평' };
        cat2_info0[9][24] = { serial:'24', name:'광주' };
        cat2_info0[9][25] = { serial:'25', name:'양주' };
        cat2_info0[9][26] = { serial:'26', name:'양평' };
        cat2_info0[9][27] = { serial:'27', name:'여주' };
        cat2_info0[9][28] = { serial:'28', name:'연천' };
        cat2_info0[9][29] = { serial:'29', name:'포천' };
        cat2_info0[9][30] = { serial:'30', name:'화성' };
    cat2_num0[9] = 31;


    cat2_info0[10] = new Array;
        cat2_info0[10][0] = { serial:'0', name:'거제' };
        cat2_info0[10][1] = { serial:'1', name:'김해' };
        cat2_info0[10][2] = { serial:'2', name:'마산' };
        cat2_info0[10][3] = { serial:'3', name:'밀양' };
        cat2_info0[10][4] = { serial:'4', name:'사천' };
        cat2_info0[10][5] = { serial:'5', name:'양산' };
        cat2_info0[10][6] = { serial:'6', name:'진주' };
        cat2_info0[10][7] = { serial:'7', name:'진해' };
        cat2_info0[10][8] = { serial:'8', name:'창원' };
        cat2_info0[10][9] = { serial:'9', name:'통영' };
        cat2_info0[10][10] = { serial:'10', name:'거창' };
        cat2_info0[10][11] = { serial:'11', name:'고성' };
        cat2_info0[10][12] = { serial:'12', name:'남해' };
        cat2_info0[10][13] = { serial:'13', name:'산청' };
        cat2_info0[10][14] = { serial:'14', name:'의령' };
        cat2_info0[10][15] = { serial:'15', name:'창녕' };
        cat2_info0[10][16] = { serial:'16', name:'하동' };
        cat2_info0[10][17] = { serial:'17', name:'함안' };
        cat2_info0[10][18] = { serial:'18', name:'함양' };
        cat2_info0[10][19] = { serial:'19', name:'합천' };
    cat2_num0[10] = 20;


    cat2_info0[11] = new Array;
        cat2_info0[11][0] = { serial:'0', name:'경산' };
        cat2_info0[11][1] = { serial:'1', name:'경주' };
        cat2_info0[11][2] = { serial:'2', name:'구미' };
        cat2_info0[11][3] = { serial:'3', name:'김천' };
        cat2_info0[11][4] = { serial:'4', name:'문경' };
        cat2_info0[11][5] = { serial:'5', name:'상주' };
        cat2_info0[11][6] = { serial:'6', name:'안동' };
        cat2_info0[11][7] = { serial:'7', name:'영주' };
        cat2_info0[11][8] = { serial:'8', name:'영천' };
        cat2_info0[11][9] = { serial:'9', name:'포항' };
        cat2_info0[11][10] = { serial:'10', name:'고령' };
        cat2_info0[11][11] = { serial:'11', name:'군위' };
        cat2_info0[11][12] = { serial:'12', name:'봉화' };
        cat2_info0[11][13] = { serial:'13', name:'성주' };
        cat2_info0[11][14] = { serial:'14', name:'영덕' };
        cat2_info0[11][15] = { serial:'15', name:'영양' };
        cat2_info0[11][16] = { serial:'16', name:'예천' };
        cat2_info0[11][17] = { serial:'17', name:'울릉' };
        cat2_info0[11][18] = { serial:'18', name:'울진' };
        cat2_info0[11][19] = { serial:'19', name:'의성' };
        cat2_info0[11][20] = { serial:'20', name:'청도' };
        cat2_info0[11][21] = { serial:'21', name:'청송' };
        cat2_info0[11][22] = { serial:'22', name:'칠곡' };
    cat2_num0[11] = 23;


    cat2_info0[12] = new Array;
        cat2_info0[12][0] = { serial:'0', name:'광양' };
        cat2_info0[12][1] = { serial:'1', name:'나주' };
        cat2_info0[12][2] = { serial:'2', name:'목포' };
        cat2_info0[12][3] = { serial:'3', name:'순천' };
        cat2_info0[12][4] = { serial:'4', name:'여수' };
        cat2_info0[12][5] = { serial:'5', name:'강진' };
        cat2_info0[12][6] = { serial:'6', name:'고흥' };
        cat2_info0[12][7] = { serial:'7', name:'곡성' };
        cat2_info0[12][8] = { serial:'8', name:'구례' };
        cat2_info0[12][9] = { serial:'9', name:'담양' };
        cat2_info0[12][10] = { serial:'10', name:'무안' };
        cat2_info0[12][11] = { serial:'11', name:'보성' };
        cat2_info0[12][12] = { serial:'12', name:'신안' };
        cat2_info0[12][13] = { serial:'13', name:'영광' };
        cat2_info0[12][14] = { serial:'14', name:'영암' };
        cat2_info0[12][15] = { serial:'15', name:'완도' };
        cat2_info0[12][16] = { serial:'16', name:'장성' };
        cat2_info0[12][17] = { serial:'17', name:'장흥' };
        cat2_info0[12][18] = { serial:'18', name:'진도' };
        cat2_info0[12][19] = { serial:'19', name:'함평' };
        cat2_info0[12][20] = { serial:'20', name:'해남' };
        cat2_info0[12][21] = { serial:'21', name:'화순' };
    cat2_num0[12] = 22;


    cat2_info0[13] = new Array;
        cat2_info0[13][0] = { serial:'0', name:'군산' };
        cat2_info0[13][1] = { serial:'1', name:'김제' };
        cat2_info0[13][2] = { serial:'2', name:'남원' };
        cat2_info0[13][3] = { serial:'3', name:'익산' };
        cat2_info0[13][4] = { serial:'4', name:'전주' };
        cat2_info0[13][5] = { serial:'5', name:'정읍' };
        cat2_info0[13][6] = { serial:'6', name:'고창' };
        cat2_info0[13][7] = { serial:'7', name:'무주' };
        cat2_info0[13][8] = { serial:'8', name:'부안' };
        cat2_info0[13][9] = { serial:'9', name:'순창' };
        cat2_info0[13][10] = { serial:'10', name:'완주' };
        cat2_info0[13][11] = { serial:'11', name:'임실' };
        cat2_info0[13][12] = { serial:'12', name:'장수' };
        cat2_info0[13][13] = { serial:'13', name:'진안' };
    cat2_num0[13] = 14;


    cat2_info0[14] = new Array;
        cat2_info0[14][0] = { serial:'0', name:'서귀포' };
        cat2_info0[14][1] = { serial:'1', name:'제주시' };
        cat2_info0[14][2] = { serial:'2', name:'남제주' };
        cat2_info0[14][3] = { serial:'3', name:'북제주' };
    cat2_num0[14] = 4;


    cat2_info0[15] = new Array;
        cat2_info0[15][0] = { serial:'0', name:'공주' };
        cat2_info0[15][1] = { serial:'1', name:'논산' };
        cat2_info0[15][2] = { serial:'2', name:'보령' };
        cat2_info0[15][3] = { serial:'3', name:'서산' };
        cat2_info0[15][4] = { serial:'4', name:'아산' };
        cat2_info0[15][5] = { serial:'5', name:'천안' };
        cat2_info0[15][6] = { serial:'6', name:'금산' };
        cat2_info0[15][7] = { serial:'7', name:'당진' };
        cat2_info0[15][8] = { serial:'8', name:'부여' };
        cat2_info0[15][9] = { serial:'9', name:'서천' };
        cat2_info0[15][10] = { serial:'10', name:'연기' };
        cat2_info0[15][11] = { serial:'11', name:'예산' };
        cat2_info0[15][12] = { serial:'12', name:'청양' };
        cat2_info0[15][13] = { serial:'13', name:'태안' };
        cat2_info0[15][14] = { serial:'14', name:'홍성' };
    cat2_num0[15] = 15;


    cat2_info0[16] = new Array;
        cat2_info0[16][0] = { serial:'0', name:'제천' };
        cat2_info0[16][1] = { serial:'1', name:'청주' };
        cat2_info0[16][2] = { serial:'2', name:'충주' };
        cat2_info0[16][3] = { serial:'3', name:'괴산' };
        cat2_info0[16][4] = { serial:'4', name:'단양' };
        cat2_info0[16][5] = { serial:'5', name:'보은' };
        cat2_info0[16][6] = { serial:'6', name:'영동' };
        cat2_info0[16][7] = { serial:'7', name:'옥천' };
        cat2_info0[16][8] = { serial:'8', name:'음성' };
        cat2_info0[16][9] = { serial:'9', name:'진천' };
        cat2_info0[16][10] = { serial:'10', name:'청원' };
    cat2_num0[16] = 11;


function ChangeCat( cat1, cat2 )
{
    document.frm_write.sCity2.options.length = cat2_num0[cat1] + 1;
    document.frm_write.sCity2.options[0] = new Option( '- 위치선택 -', '', true, true );

    for( var i=0; i<cat2_num0[cat1]; i++ )
    {
        document.frm_write.sCity2.options[i+1] = new Option( cat2_info0[cat1][i].name, cat2_info0[cat1][i].name );

        if( cat2_info0[cat1][i].name == cat2 )
        {
            document.frm_write.sCity2.options[i+1].selected = true;
        }
    }
}

// setting.html ----------------------------------------------------------------------------------------

<script language='javascript' src='CityData.js'></script>
<script language='javascript' src='./js/setting.js'></script>
<table cellspacing='0' align='center' cellpadding='3' border='1' width='95%' bordercolordark='white' bordercolorlight='#D6D6D6'>
<tr>
    <td>
    <select name='sCity' class='input' id='sCity' onChange='Next(this.selectedIndex,this.options[this.selectedIndex].value)'>
        <option value=''> 선택하세요
    </select>

    <script language='javascript'>
    var len = cat1_info0.length;
    var selectBox = new Array();
    var identity = new Array();
    for(var i=1; i<len; ++i)
    {
        document.getElementById('sCity').options[i] = new Option(cat1_info0[i].name,cat1_info0[i].name);
    }    
    </script></td>
</tr>
<tr>
    <td><div id='ChkBox'></div></td>
</tr>
<tr>
    <td>최대 5개까지 지역 선택 가능,선택된 지역을 클릭시 지역에서 제외됨</td>
</tr>
<tr>
    <td><div id='SelectBox'></div></td>
</tr>
</table>