그누보드 QA - 다중 셀렉트박스 db연동질문입니다.

다중 셀렉트박스 db연동질문입니다.

시작하는이제 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2020.05.28 16:07:06 조회 4799 (121.♡.♡.243)

본문

다중 셀렉트박스를 이용하여 소재지(주소)를 선택할수 있는 기능을 구현할려고 합니다.

아래 코드는 기본적으로 쓰는 다중 셀렉트박스의 코드인데

해당 코드의 주소 데이터(sojaeji)가 양이 너무 방대하여 지저분해 보이고 관리도 번거롭기에

오라클db에 해당 데이터로 table을 생성하였습니다.

그런데 db의 table을 연동시키는 과정에서 함수부분을 어떻게 수정해야할지에서 헤매게 되네요.

자바 고수님들의 조언을 구해봐도될까요?


<html>
<head>
<title> New Document </title>
</head>
<script language="JavaScript">
<!--
    var sojaeji = new Array();
    sojaeji['시도'] = '강원,경기,경남,경북,광주,대구,대전,부산,서울,울산,인천,전남,전북,제주,충남,충북';
    sojaeji['강원'] = '강릉시,고성군,동해시,삼척시,속초시,양구군,양양군,영월군,원주시,인제군,정선군,철원군,춘천시,태백시,평창군,홍천군,화천군,횡성군';
    sojaeji['강원->강릉시'] = '강동면,강문동,견소동,교1동,교2동,교동,구정면,금학동,난곡동,남문동,남항진동,내곡동,노암동,담산동,대전동,두산동,명주동,박월동,병산동,사천면,성남동,성내동,성산면,송정동,신석동,안현동,연곡면,옥계면,옥천동,왕산면,용강동,운산동,운정동,월호평동,유산동,유천동,임당동,입암동,장현동,저동,주문진읍,죽헌동,지변동,청량동,초당동,포남1동,포남2동,포남동,학동,홍제동,회산동';
    sojaeji['강원->고성군'] = '간성읍,거진읍,죽왕면,토성면,현내면';
    sojaeji['강원->동해시'] = '괴란동,구미동,구호동,귀운동,나안동,내동,단봉동,달방동,대구동,대진동,동호동,동회동,만우동,망상동,묵호동,발한동,부곡동,북삼동,북평동,비천동,삼화동,송정동,쇄운동,신흥동,심곡동,어달동,용정동,이기동,이도동,이로동,지가동,지흥동,천곡동,초구동,추암동,평릉동,호현동,효가동';
    sojaeji['강원->삼척시'] = '가곡면,갈천동,건지동,교동,근덕면,근산동,남양동,노곡면,당저동,도경동,도계읍,등봉동,마달동,마평동,미로면,사직동,성남동,성내동,성북동,신기면,오분동,오사동,우지동,원당동,원덕읍,읍상동,읍중동,자원동,적노동,정상동,정하동,조비동,증산동,평전동,하장면';
    sojaeji['강원->속초시'] = '교동,금호동,노학동,대포동,도문동,동명동,설악동,영랑동,장사동,조양동,중앙동,청학동,청호동';
    sojaeji['강원->양구군'] = '남면,동면,방산면,양구읍,해안면';
    sojaeji['강원->양양군'] = '강현면,서면,손양면,양양읍,현남면,현북면';
    sojaeji['강원->영월군'] = '남면,북면,상동읍,서면,수주면,영월읍,주천면,중동면,하동면';
    sojaeji['강원->원주시'] = '가현동,개운동,관설동,귀래면,단계동,단구동,명륜1동,명륜2동,명륜동,무실동,문막읍,반곡동,봉산동,부론면,소초면,신림면,우산동,원동,인동,일산동,중앙동,지정면,태장1동,태장2동,태장동,판부면,평원동,학성동,행구동,호저면,흥업면';
    sojaeji['강원->인제군'] = '기린면,남면,북면,상남면,서화면,인제읍';
    sojaeji['강원->정선군'] = '고한읍,남면,동면,북면,북평면,사북읍,신동읍,임계면,정선읍';
    sojaeji['강원->철원군'] = '갈말읍,근남면,근북면,김화읍,동송읍,서면,철원읍';
    sojaeji['강원->춘천시'] = '교동,근화동,낙원동,남면,남산면,동내면,동면,동산면,봉의동,북산면,사농동,사북면,삼천동,서면,석사동,송암동,신동,신동면,신북읍,약사동,옥천동,온의동,요선동,우두동,운교동,조양동,죽림동,중도동,칠전동,퇴계동,효자1동,효자2동,효자3동,효자동,후평1동,후평2동,후평3동,후평동';
    sojaeji['강원->태백시'] = '금천동,동점동,문곡동,백산동,상사미동,상장동,소도동,원동,장성동,적각동,조탄동,창죽동,철암동,통동,하사미동,혈동,화전동,황지동';
    sojaeji['강원->평창군'] = '대화면,도암면,미탄면,방림면,봉평면,용평면,진부면,평창읍';
    sojaeji['강원->홍천군'] = '남면,내면,내촌면,동면,두촌면,북방면,서면,서석면,홍천읍,화촌면';
    sojaeji['강원->화천군'] = '간동면,사내면,상서면,하남면,화천읍';
    sojaeji['강원->횡성군'] = '갑천면,강림면,공근면,둔내면,서원면,안흥면,우천면,청일면,횡성읍';
    sojaeji['경기'] = '가평군,고양시 덕양구,고양시 일산구,과천시,광명시,광주시,구리시,군포시,김포시,남양주시,동두천시,부천시 소사구,부천시 오정구,부천시 원미구,성남시 분당구,성남시 수정구,성남시 중원구,수원시 권선구,수원시 장안구,수원시 팔달구,시흥시,안산시 단원구,안산시 상록구,안성시,안양시 동안구,안양시 만안구,양주군,양평군,여주군,연천군,오산시,용인시,의왕시,의정부시,이천시,파주시,평택시,포천군,하남시,화성시';
    function sidochange() 
    {
        var f = document.ftest;
        gugunview(f.sido.value);
        dongview(f.sido.value, f.gugun.value);
    }
    function gugunchange() 
    {
        var f = document.ftest;
        dongview(f.sido.value, f.gugun.value);
    }
    function dongview(sido, gugun)
    {
        var f = document.ftest;
        f.dong.options.length = 1;
        f.dong.options[0].text = "읍/면/동(전체)";
        f.dong.options[0].selected = true;
        if (!sido || !gugun) {
            return;
        }
        sojae = sojaeji[sido+"->"+gugun].split(",");
        f.dong.options.length = sojae.length+1;
        for (i=0; i<sojae.length; i++) {
            f.dong.options[i+1].value = sojae[i];
            f.dong.options[i+1].text = sojae[i];
        }
    }
    function gugunview(sido)
    {
        var f = document.ftest;
        f.gugun.options.length = 1;
        f.gugun.options[0].text = "시/군/구(전체)";
        f.gugun.options[0].selected = true;
        if (!sido) {
            return;
        }
        sojae = sojaeji[sido].split(",");
        f.gugun.options.length = sojae.length+1;
        for (i=0; i<sojae.length; i++) {
            f.gugun.options[i+1].value = sojae[i];
            f.gugun.options[i+1].text = sojae[i];
        }
    }
    function sidoview()
    {
        var f = document.ftest;
        f.sido.options.length = 1;
        f.sido.options[0].text = "시/도(전체)";
        sojae = sojaeji["시도"].split(",");
        f.sido.options.length = sojae.length+1;
        for (i=0; i<sojae.length; i++) {
            f.sido.options[i+1].value = sojae[i];
            f.sido.options[i+1].text = sojae[i];
        }
    }
//-->
</script>
<body>
<script language="JavaScript" src='./sojaeji.js'></script>
<form name=ftest method=get>
<select name=sido onchange="sidochange()"></select>
<select name=gugun onchange="gugunchange()"></select>
<select name=dong></select>
</form>
<script language="JavaScript">
<!--
    sidoview();
    gugunview("");
    dongview("", "");
//-->
</script>
</body>
</html>