728x90
동적으로 선택 박스를 제어하는 jQuery의 매력
안녕하세요! 프로그래밍과 웹 개발의 매력을 함께 나누는 블로그 방문자 여러분! 오늘은 jQuery를 활용하여 동적으로 선택 박스를 제어하는 방법을 알아보려고 합니다. 특히, 사용자가 선택한 옵션에 따라 다른 옵션들이 자동으로 변경되는 기능을 구현해 보겠습니다. 이러한 기능은 사용자의 경험을 한층 더 향상시켜 줄 수 있습니다.
들어가며
이번 포스트에서 다룰 주제는 특정한 지역 정보를 선택하기 위한 '시도', '시군구', '읍면동' 투웨이 동적 선택 박스입니다. 사용자가 시도를 선택하면 그에 맞춰 시군구가, 다시 시군구를 선택하면 읍면동이 자동으로 업데이트되는 구조입니다. 예를 들어, 서울특별시를 선택하면 서울특별시 내부의 구들이, 다시 강남구를 선택하면 강남구 내부의 동들이 나오는 방식이죠.
이러한 기능은 특히 행정 정보 처리 시 유용하게 사용될 수 있습니다.
코드 작성하기
아래는 jQuery와 HTML을 사용하여 동적 선택 박스를 구현한 코드입니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>jQuery Select Example</title>
<style>
div.contents {
text-align: center;
}
</style>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
let hangjungdong = {
sido: [
{ sido: '서울특별시', codeNm: '서울', code: '11' },
{ sido: '부산광역시', codeNm: '부산', code: '21' }
],
sigugun: [
{ sido: '11', sigugun: '강남구', codeNm: '강남', code: '110' },
{ sido: '11', sigugun: '서초구', codeNm: '서초', code: '111' }
],
dong: [
{ sido: '11', sigugun: '110', dong: '역삼동', codeNm: '역삼', code: '11001' },
{ sido: '11', sigugun: '111', dong: '방배동', codeNm: '방배', code: '11002' }
]
};
$(document).ready(function () {
// 시도 세팅
$.each(hangjungdong.sido, function (idx, code) {
$('#sido').append(new Option(code.codeNm, code.code));
});
// 시도 변경시 시군구 세팅
$('#sido').change(function () {
let sidoCode = $(this).val();
$('#sigugun').empty().append(new Option('선택', ''));
$.each(hangjungdong.sigugun, function (idx, code) {
if (code.sido == sidoCode) {
$('#sigugun').append(new Option(code.codeNm, code.sigugun));
}
});
});
// 시군구 변경시 동 세팅
$('#sigugun').change(function () {
let sigugunCode = $(this).val();
$('#dong').empty().append(new Option('선택', ''));
$.each(hangjungdong.dong, function (idx, code) {
if (code.sigugun == sigugunCode) {
$('#dong').append(new Option(code.codeNm, code.dong));
}
});
});
});
</script>
</head>
<body>
<div class="contents">
<select id="sido"><option value="">시도 선택</option></select>
<select id="sigugun"><option value="">시군구 선택</option></select>
<select id="dong"><option value="">읍면동 선택</option></select>
</div>
</body>
</html>
코드 설명하기
1. HTML 구조
- 기본적으로 세 개의
<select>박스를 HTML로 작성했습니다. 각 박스는 ‘시도’, ‘시군구’, ‘읍면동’으로 구성되어 있습니다.
2. jQuery 초기화
$(document).ready()함수를 사용하여 DOM이 로드된 후에 jQuery 코드를 실행합니다. 이는 DOM을 정확히 조작하기 위한 필수 단계입니다.
3. 시도 생성
hangjungdong객체에 시도 정보를 담아놓고, 이를 기반으로select박스에 추가합니다. 사용자가 시도를 선택하면, 해당 시도에 해당하는 시군구 정보를 가져오게 됩니다.
4. 시군구 및 읍면동 생성
- 사용자가 시도를 선택하면, 그에 맞는 시군구가 나타나고, 시군구를 선택하면 읍면동이 자동으로 업데이트됩니다.
마무리하며
이 포스트에서는 jQuery를 사용하여 동적인 선택 박스를 만드는 방법을 살펴보았습니다. 이 코드는 특정 지역에 대한 선택 기능을 제공하는 웹 애플리케이션에서 유용하게 사용할 수 있습니다.
여러분도 직접 이 코드를 활용해 보시고, 필요한 사항에 맞게 커스터마이징해보세요! 질문이나 피드백이 있으시면 댓글로 남겨주시기 바랍니다.
다음 포스트에서 더 유용한 정보를 가지고 오겠습니다! 감사합니다!
공유하기: 이 정보를 친구들과 나누는 것도 좋은 방법이겠죠? 그럼 다음에 만나요!
728x90
'개발' 카테고리의 다른 글
| 효율적인 파일 작업 자동화를 위한 Python 스크립트 작성하기 (1) | 2024.11.14 |
|---|---|
| 효율적인 파일 관리 시스템 구축을 위한 프로그래밍 가이드 (0) | 2024.11.14 |
| 라즈베리파이에서 Node.js 최신버전으로 업데이트하는 방법 안내 (3) | 2024.11.14 |
| M1 Pro에서 Flutter 설치하는 완벽 가이드 (1) | 2024.11.14 |
| 스프링 시큐리티로 안전한 로그인 시스템 구축하기 (2) | 2024.11.14 |