JQuery로 구현하는 동적 콤보박스 연결 예제

2025. 1. 14. 09:52

동적 콤보박스는 사용자가 선택한 값에 따라 다른 콤보박스의 옵션이 동적으로 변경되는 기능을 제공합니다. 이 글에서는 jQuery를 활용하여 다중 동적 콤보박스를 구현하는 방법을 상세히 설명합니다. 예제와 함께 실제 구현 방법을 알아봅시다.

1. 프로젝트 기본 설정

HTML 파일 구조

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>동적 콤보박스 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>jQuery로 구현하는 동적 콤보박스</h1>
    <form id="dynamicComboForm">
        <label for="country">Country:</label>
        <select id="country" name="country">
            <option value="">-- Select Country --</option>
            <option value="usa">USA</option>
            <option value="canada">Canada</option>
            <option value="india">India</option>
        </select>

        <label for="state">State/Province:</label>
        <select id="state" name="state">
            <option value="">-- Select State/Province --</option>
        </select>

        <label for="city">City:</label>
        <select id="city" name="city">
            <option value="">-- Select City --</option>
        </select>
    </form>
</body>
</html>

CSS 추가 (선택사항)

<style>
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 20px;
    }
    label {
        display: block;
        margin-top: 10px;
    }
    select {
        margin-bottom: 10px;
        padding: 5px;
        width: 200px;
    }
</style>

2. 동적 데이터 준비

데이터 구조

서버에서 데이터를 제공하거나 클라이언트에 미리 설정된 데이터를 사용해야 합니다. 예를 들어:

const data = {
    usa: {
        california: ["Los Angeles", "San Francisco"],
        texas: ["Houston", "Dallas"],
    },
    canada: {
        ontario: ["Toronto", "Ottawa"],
        quebec: ["Montreal", "Quebec City"],
    },
    india: {
        maharashtra: ["Mumbai", "Pune"],
        karnataka: ["Bangalore", "Mysore"],
    },
};

3. jQuery를 활용한 동적 콤보박스 구현

기본 스크립트 작성

$(document).ready(function () {
    // 데이터 정의
    const data = {
        usa: {
            california: ["Los Angeles", "San Francisco"],
            texas: ["Houston", "Dallas"],
        },
        canada: {
            ontario: ["Toronto", "Ottawa"],
            quebec: ["Montreal", "Quebec City"],
        },
        india: {
            maharashtra: ["Mumbai", "Pune"],
            karnataka: ["Bangalore", "Mysore"],
        },
    };

    // 국가 선택 시 상태(State) 콤보박스 업데이트
    $("#country").change(function () {
        const country = $(this).val();
        const stateSelect = $("#state");
        const citySelect = $("#city");

        stateSelect.empty().append('<option value="">-- Select State/Province --</option>');
        citySelect.empty().append('<option value="">-- Select City --</option>');

        if (country && data[country]) {
            for (const state in data[country]) {
                stateSelect.append(new Option(state, state));
            }
        }
    });

    // 상태(State) 선택 시 도시(City) 콤보박스 업데이트
    $("#state").change(function () {
        const country = $("#country").val();
        const state = $(this).val();
        const citySelect = $("#city");

        citySelect.empty().append('<option value="">-- Select City --</option>');

        if (country && state && data[country][state]) {
            data[country][state].forEach(function (city) {
                citySelect.append(new Option(city, city));
            });
        }
    });
});

4. 상세한 동작 원리

초기화:
- $("#country"), $("#state"), $("#city")는 각각 id를 기준으로 선택된 HTML 요소를 제어합니다.
- empty() 메서드를 사용하여 기존 옵션을 초기화합니다.
- append() 메서드를 통해 동적으로 <option> 태그를 추가합니다.
국가 변경 이벤트:
- change() 이벤트를 사용하여 국가가 변경될 때 동작을 정의합니다.
- 선택한 국가의 데이터를 기준으로 상태(State) 콤보박스를 업데이트합니다.
상태 변경 이벤트:
- change() 이벤트를 사용하여 상태가 변경될 때 동작을 정의합니다.
- 선택한 상태의 데이터를 기준으로 도시(City) 콤보박스를 업데이트합니다.

5. 확장: 서버와 통합

AJAX를 활용한 동적 데이터 로드

서버에서 데이터를 받아오는 방식으로 확장할 수도 있습니다.

서버 데이터 예제

{
    "usa": {
        "california": ["Los Angeles", "San Francisco"],
        "texas": ["Houston", "Dallas"]
    },
    "canada": {
        "ontario": ["Toronto", "Ottawa"],
        "quebec": ["Montreal", "Quebec City"]
    }
}

jQuery AJAX 사용

$(document).ready(function () {
    $("#country").change(function () {
        const country = $(this).val();
        const stateSelect = $("#state");

        stateSelect.empty().append('<option value="">-- Select State/Province --</option>');

        if (country) {
            $.getJSON(`/api/states?country=${country}`, function (data) {
                data.states.forEach(function (state) {
                    stateSelect.append(new Option(state.name, state.code));
                });
            });
        }
    });

    $("#state").change(function () {
        const state = $(this).val();
        const citySelect = $("#city");

        citySelect.empty().append('<option value="">-- Select City --</option>');

        if (state) {
            $.getJSON(`/api/cities?state=${state}`, function (data) {
                data.cities.forEach(function (city) {
                    citySelect.append(new Option(city.name, city.code));
                });
            });
        }
    });
});

6. 결과 및 활용 방안

위 코드를 사용하면 다음과 같은 기능을 제공합니다:

지역 기반 동적 옵션 생성: 국가, 상태, 도시의 계층 구조를 동적으로 설정합니다.
확장성: 데이터를 변경하거나 서버 통합이 용이합니다.
UI 개선: 사용자 경험을 향상시켜 선택 과정을 단순화합니다.

7. 전체 소스 코드

HTML

위에서 작성한 HTML을 참고하세요.

CSS

위에서 작성한 CSS를 참고하세요.

JavaScript

$(document).ready(function () {
    const data = {
        usa: {
            california: ["Los Angeles", "San Francisco"],
            texas: ["Houston", "Dallas"],
        },
        canada: {
            ontario: ["Toronto", "Ottawa"],
            quebec: ["Montreal", "Quebec City"],
        },
        india: {
            maharashtra: ["Mumbai", "Pune"],
            karnataka: ["Bangalore", "Mysore"],
        },
    };

    $("#country").change(function () {
        const country = $(this).val();
        const stateSelect = $("#state");
        const citySelect = $("#city");

        stateSelect.empty().append('<option value="">-- Select State/Province --</option>');
        citySelect.empty().append('<option value="">-- Select City --</option>');

        if (country && data[country]) {
            for (const state in data[country]) {
                stateSelect.append(new Option(state, state));
            }
        }
    });

    $("#state").change(function () {
        const country = $("#country").val();
        const state = $(this).val();
        const citySelect = $("#city");

        citySelect.empty().append('<option value="">-- Select City --</option>');

        if (country && state && data[country][state]) {
            data[country][state].forEach(function (city) {
                citySelect.append(new Option(city, city));
            });
        }
    });
});

이 예제는 다양한 상황에서 활용할 수 있는 동적 콤보박스의 기본적인 구현 방식입니다. 사용자 편의를 위해 디자인을 개선하거나 데이터 소스를 다양화할 수도 있습니다.

저작자표시

'개발 > Javascript' 카테고리의 다른 글

웹 저장소 기술: SessionStorage, LocalStorage, 쿠키의 비교 및 사용법 (0)	2025.01.14
다중 모니터 환경에서 window.open으로 특정 모니터에 팝업 띄우기 (0)	2025.01.14
JavaScript를 활용한 Drag and Drop 기능 구현 (0)	2025.01.08
jQuery Dialog를 활용한 다양한 예제 (0)	2025.01.08
jquery를 이용한 특정영역에 input Max값 Min값 구하기 (0)	2022.07.05

subinto의 개발노트