본문 바로가기
DHTMLX

DHTMLX - 두개의 Combo 연결하기

by Dokon Jang 2015. 5. 3.
반응형

DHTMLX Combo는 주로 분류를 표시할 때 많이 사용합니다.

예를 들어 부서, 직원으로 구분되어 있는 두개의 Combo에 부서를 변경하면 직원 Combo의 데이터가 부서에 따라 변경되도록 개발합니다.

이렇게 두개의 Combo를 서로 연결하는 방법을 알아보겠습니다. 

 

1. 부서 XML (department.xml)

<?xml version="1.0" encoding="UTF-8"?>
<complete>
    <option value="1">연구소</option>
    <option value="2">생산기술</option>
    <option value="3">생산</option>
</complete>
 

 

2. 직원 XML

  - 연구소 직원 데이터 (employment_1.xml)

<?xml version="1.0" encoding="UTF-8"?>
<complete>
    <option value="1">연구소-1</option>
    <option value="2">연구소-2</option>
    <option value="3">연구소-3</option>
    <option value="4">연구소-4</option>
    <option value="5">연구소-5</option>
</complete>
 

 - 생산기술 직원 데이터 (employment_2.xml)

<?xml version="1.0" encoding="UTF-8"?>
<complete>
    <option value="1">생산기술-1</option>
    <option value="2">생산기술-2</option>
    <option value="3">생산기술-3</option>
</complete>
 

 - 생산 직원 데이터(employment_3.xml)

<?xml version="1.0" encoding="UTF-8"?>
<complete>
    <option value="1">생산-1</option>
</complete>

 

 

3. HTML + JavaScript

 - 부서 Combo를 선택할 때마다 직원 Combo의 데이터를 변경됩니다.

   ( depCombo.attachEvent("onChange" ....  )

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/dhtmlx/dhtmlx.css"/>
<script src="/dhtmlx/dhtmlx.js"></script>

<script>
    var depCombo;
    var empCombo;

    function doOnLoad(){
        depCombo = new dhtmlXCombo("dep_combo", "department", 100);
        empCombo = new dhtmlXCombo("emp_combo", "employment", 100);
        
        // 부서 XML 로드
        depCombo.load("department.xml");
        
        // 부서Combo 이벤트 
        depCombo.attachEvent("onChange", function(){
            var value = depCombo.getSelectedValue();
            
            // 직원 XML 로드
            empCombo.load("employment_" + value + ".xml");
        });
    }
</script>
<title>Combo</title>
</head>
<body onload="doOnLoad();">
    <table>
        <tr>
            <td>부서</td>
            <td><div id="dep_combo"></div></td>
        </tr>
        <tr>
            <td>직원</td>
            <td><div id="emp_combo"></div></td>
        </tr>
    </table>
</body>
</html>
 

 

4.실행 결과

 - 부서 Combo에서 연구소 선택

 - 부서 Combo에서 생산기술 선택

 

반응형

댓글0