도찐개찐
[Javascript] 지역 선택 셀렉트 박스 본문
https://github.com/dev-truly/depth-picker
GitHub - dev-truly/depth-picker
Contribute to dev-truly/depth-picker development by creating an account on GitHub.
github.com
다중 뎁스 형태의 개체, 배열 형태의 데이터를 전달 해서 동적 셀렉트 박스를 생성할 수 있는 Javascript 코드를 작성 해봤습니다.
뎁스 구분없이 사용이 가능 하니 상단 예제 소스와 아래 풀어진 예제 소스를 참고 부탁 드립니다.
사용법1 : 공백 선택 추가, 뎁스 상관 없이 데이터 생성
<body>
<div id="depth-picker"></div>
<script src="/js/PnJDepthPicker.min.js"></script>
<script>
// new PnJDepthPicker('#삽입 위치', 전달 값"{**:[]}", "공백데이터 삽입 여부", 옵션{공백 타이틀, 뎁스별 셀렉트 박스 이름});
const data = {
'가수': ['AAA', 'BBB'],
'연예인': {
'영화배우': ['홍길동', '홍길자'],
'드라마배우': ['황순원', '황순투'],
},
'개그맨': ['고질라', '드래곤'],
'서울': ['강서구', '강남구'],
'아시아': {
'한국': {
'서울': {
'강서구': ['방화', '화곡'],
'강남구': ['역삼', '학동'],
},
'경기도': ['인천', '부천'],
},
'중국': ['북경']
},
}
new PnJDepthPicker('#depth-picker', data, 1, {noneSelectMsg: ['1depth 선택', '2depth 선택', '3depth 선택' , '4depth 선택'], selectName: ['depth_1', 'depth_2', 'depth_3', 'depth_4']});
</script>
</body>
사용법 2 : 공백 선택 옵션제거, 권역, 시도, 시군구 선택
아래 코딩 내용을 확인 해 보시면 공백 데이터 삽입 여부를 false 또는 0값으로 입력시 공백 선택 옵션 미생성 처리 후 옵션값을 생성하며 1번 옵션을 기준으로 하위 셀렉트 박스까지 기본 생성하는 것을 확인 할 수 있습니다.
<body>
<div id="depth-picker"></div>
<script src="/js/PnJDepthPicker.min.js"></script>
<script>
// new PnJDepthPicker('#삽입 위치', 전달 값"{**:[]}", "공백데이터 삽입 여부", 옵션{공백 타이틀, 뎁스별 셀렉트 박스 이름});
const area = {
"수도권" :{
"서울특별시" : [ "강남구", "강동구", "강북구", "강서구", "관악구", "광진구", "구로구", "금천구", "노원구", "도봉구", "동대문구", "동작구", "마포구", "서대문구", "서초구", "성동구", "성북구", "송파구", "양천구", "영등포구", "용산구", "은평구", "종로구", "중구", "중랑구" ],
"경기도" : [ "수원시 장안구", "수원시 권선구", "수원시 팔달구", "수원시 영통구", "성남시 수정구", "성남시 중원구", "성남시 분당구", "의정부시", "안양시 만안구", "안양시 동안구", "부천시", "광명시", "평택시", "동두천시", "안산시 상록구", "안산시 단원구", "고양시 덕양구", "고양시 일산동구",
"고양시 일산서구", "과천시", "구리시", "남양주시", "오산시", "시흥시", "군포시", "의왕시", "하남시", "용인시 처인구", "용인시 기흥구", "용인시 수지구", "파주시", "이천시", "안성시", "김포시", "화성시", "광주시", "양주시", "포천시", "여주시", "연천군", "가평군",
"양평군" ],
"인천광역시" : [ "계양구", "미추홀구", "남동구", "동구", "부평구", "서구", "연수구", "중구", "강화군", "옹진군" ]
},
"강원권" :{
"강원도" : [ "춘천시", "원주시", "강릉시", "동해시", "태백시", "속초시", "삼척시", "홍천군", "횡성군", "영월군", "평창군", "정선군", "철원군", "화천군", "양구군", "인제군", "고성군", "양양군" ]
},
"충청권" :{
"충청북도" : [ "청주시 상당구", "청주시 서원구", "청주시 흥덕구", "청주시 청원구", "충주시", "제천시", "보은군", "옥천군", "영동군", "증평군", "진천군", "괴산군", "음성군", "단양군" ],
"충청남도" : [ "천안시 동남구", "천안시 서북구", "공주시", "보령시", "아산시", "서산시", "논산시", "계룡시", "당진시", "금산군", "부여군", "서천군", "청양군", "홍성군", "예산군", "태안군" ],
"대전광역시" : [ "대덕구", "동구", "서구", "유성구", "중구" ],
"세종특별자치시" : [ "세종특별자치시" ]
},
"전라권" :{
"전라북도" : [ "전주시 완산구", "전주시 덕진구", "군산시", "익산시", "정읍시", "남원시", "김제시", "완주군", "진안군", "무주군", "장수군", "임실군", "순창군", "고창군", "부안군" ],
"전라남도" : [ "목포시", "여수시", "순천시", "나주시", "광양시", "담양군", "곡성군", "구례군", "고흥군", "보성군", "화순군", "장흥군", "강진군", "해남군", "영암군", "무안군", "함평군", "영광군", "장성군", "완도군", "진도군", "신안군" ],
"광주광역시" : [ "광산구", "남구", "동구", "북구", "서구" ]
},
"경상권" : {
"경상북도" : [ "포항시 남구", "포항시 북구", "경주시", "김천시", "안동시", "구미시", "영주시", "영천시", "상주시", "문경시", "경산시", "군위군", "의성군", "청송군", "영양군", "영덕군", "청도군", "고령군", "성주군", "칠곡군", "예천군", "봉화군", "울진군", "울릉군" ],
"경상남도" : [ "창원시 의창구", "창원시 성산구", "창원시 마산합포구", "창원시 마산회원구", "창원시 진해구", "진주시", "통영시", "사천시", "김해시", "밀양시", "거제시", "양산시", "의령군", "함안군", "창녕군", "고성군", "남해군", "하동군", "산청군", "함양군", "거창군", "합천군" ],
"부산광역시" : [ "강서구", "금정구", "남구", "동구", "동래구", "부산진구", "북구", "사상구", "사하구", "서구", "수영구", "연제구", "영도구", "중구", "해운대구", "기장군" ],
"대구광역시" : [ "남구", "달서구", "동구", "북구", "서구", "수성구", "중구", "달성군" ],
"울산광역시" : [ "남구", "동구", "북구", "중구", "울주군" ]
},
"제주권" : {
"제주특별자치도" : [ "서귀포시", "제주시" ]
}
};
new PnJDepthPicker('#depth-picker', area, 0, {noneSelectMsg: ['권역선택', '시도선택', '시군구선택'], selectName: ['area', 'sido', 'sigungu']});
</script>
</body>
사용법3 : 공백 선택 옵션 추가, 시도, 시군구 선택, 생성 셀렉트 박스 네이밍 단일 처리
전달 옵션중 "selectName" 전달 갯수가 뎁스 수와 다른 경우 0뎁스 데이터를 기준으로 셀렉트 박스 명을 생성 합니다.
<body>
<div id="depth-picker"></div>
<script src="/js/PnJDepthPicker.min.js"></script>
<script>
// new PnJDepthPicker('#삽입 위치', 전달 값"{**:[]}", "공백데이터 삽입 여부", 옵션{공백 타이틀, 뎁스별 셀렉트 박스 이름});
const area2 = {
"서울특별시" : [ "강남구", "강동구", "강북구", "강서구", "관악구", "광진구", "구로구", "금천구", "노원구", "도봉구", "동대문구", "동작구", "마포구", "서대문구", "서초구", "성동구", "성북구", "송파구", "양천구", "영등포구", "용산구", "은평구", "종로구", "중구", "중랑구" ],
"경기도" : [ "수원시 장안구", "수원시 권선구", "수원시 팔달구", "수원시 영통구", "성남시 수정구", "성남시 중원구", "성남시 분당구", "의정부시", "안양시 만안구", "안양시 동안구", "부천시", "광명시", "평택시", "동두천시", "안산시 상록구", "안산시 단원구", "고양시 덕양구", "고양시 일산동구",
"고양시 일산서구", "과천시", "구리시", "남양주시", "오산시", "시흥시", "군포시", "의왕시", "하남시", "용인시 처인구", "용인시 기흥구", "용인시 수지구", "파주시", "이천시", "안성시", "김포시", "화성시", "광주시", "양주시", "포천시", "여주시", "연천군", "가평군",
"양평군" ],
"인천광역시" : [ "계양구", "미추홀구", "남동구", "동구", "부평구", "서구", "연수구", "중구", "강화군", "옹진군" ],
"강원도" : [ "춘천시", "원주시", "강릉시", "동해시", "태백시", "속초시", "삼척시", "홍천군", "횡성군", "영월군", "평창군", "정선군", "철원군", "화천군", "양구군", "인제군", "고성군", "양양군" ],
"충청북도" : [ "청주시 상당구", "청주시 서원구", "청주시 흥덕구", "청주시 청원구", "충주시", "제천시", "보은군", "옥천군", "영동군", "증평군", "진천군", "괴산군", "음성군", "단양군" ],
"충청남도" : [ "천안시 동남구", "천안시 서북구", "공주시", "보령시", "아산시", "서산시", "논산시", "계룡시", "당진시", "금산군", "부여군", "서천군", "청양군", "홍성군", "예산군", "태안군" ],
"대전광역시" : [ "대덕구", "동구", "서구", "유성구", "중구" ],
"세종특별자치시" : [ "세종특별자치시" ],
"전라북도" : [ "전주시 완산구", "전주시 덕진구", "군산시", "익산시", "정읍시", "남원시", "김제시", "완주군", "진안군", "무주군", "장수군", "임실군", "순창군", "고창군", "부안군" ],
"전라남도" : [ "목포시", "여수시", "순천시", "나주시", "광양시", "담양군", "곡성군", "구례군", "고흥군", "보성군", "화순군", "장흥군", "강진군", "해남군", "영암군", "무안군", "함평군", "영광군", "장성군", "완도군", "진도군", "신안군" ],
"광주광역시" : [ "광산구", "남구", "동구", "북구", "서구" ],
"경상북도" : [ "포항시 남구", "포항시 북구", "경주시", "김천시", "안동시", "구미시", "영주시", "영천시", "상주시", "문경시", "경산시", "군위군", "의성군", "청송군", "영양군", "영덕군", "청도군", "고령군", "성주군", "칠곡군", "예천군", "봉화군", "울진군", "울릉군" ],
"경상남도" : [ "창원시 의창구", "창원시 성산구", "창원시 마산합포구", "창원시 마산회원구", "창원시 진해구", "진주시", "통영시", "사천시", "김해시", "밀양시", "거제시", "양산시", "의령군", "함안군", "창녕군", "고성군", "남해군", "하동군", "산청군", "함양군", "거창군", "합천군" ],
"부산광역시" : [ "강서구", "금정구", "남구", "동구", "동래구", "부산진구", "북구", "사상구", "사하구", "서구", "수영구", "연제구", "영도구", "중구", "해운대구", "기장군" ],
"대구광역시" : [ "남구", "달서구", "동구", "북구", "서구", "수성구", "중구", "달성군" ],
"울산광역시" : [ "남구", "동구", "북구", "중구", "울주군" ],
"제주특별자치도" : [ "서귀포시", "제주시" ]
};
new PnJDepthPicker('#depth-picker', area2, 1, {noneSelectMsg: ['지역선택'], selectName: ['area']});
</script>
</body>
728x90
'Javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 물음표 2개 / 느낌표 2개 / 물결(~) 2개 연산자 (0) | 2023.11.21 |
|---|---|
| [Javascript] private variable (0) | 2022.05.13 |
| [Javascript] For VS forEach VS map (0) | 2022.04.25 |
| [Javascript VS ES6] 화살표 함수(Arrow Function) (0) | 2022.04.25 |
| [Javascript VS ES6] Prototype vs Class (0) | 2022.04.25 |
Comments