다중 셀렉트 박스 지역 수정 전국 시/군 단위

코딩 공부/JS

다중 셀렉트 박스 지역 수정 전국 시/군 단위

hg_96 2022. 1. 18. 18:28

https://terryvery.tistory.com/51

[Javascript] 다중 셀렉트 박스(chained select box) / 셀렉트 박스 2개 연동 / 시도 시군구 다중 셀렉트박

1. 기본형(걸그룹 선택 시, 다음 셀렉트박스는 해당 걸그룹 이름 보이게) 걸그룹을 선택해주세요 블랙핑크 에프엑스 EXID 좋아하는 멤버를 선택해주세요 2. 시도/시군구형(시/도 선택 시, 다음 셀

terryvery.tistory.com

https://ko.wikipedia.org/wiki/%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD%EC%9D%98_%ED%96%89%EC%A0%95_%EA%B5%AC%EC%97%AD

대한민국의 행정 구역 - 위키백과, 우리 모두의 백과사전

대한민국의 행정 구역 위키백과, 우리 모두의 백과사전.

ko.wikipedia.org

위의 링크를 참조해서 조금 쓰기 편하게 변경도하고 위키백과의 힘을 빌려서 지역을 다시 수정했다

사용법:

복사해서 html 파일로 만들어서 사용하면 된다. 전체는 값을 넣지않은 이유는 이 조건을 사용해서 WHERE절을 만들어서 검색을 때릴건데 전체를 검색하고싶을때 해당 1번 선택값과 2번 선택값을 받아올텐데 if ( val == '전체' ) 를 사용하지 않고 값을 비었는지 체크하고 비어있다면 1번 값으로만 하고 비어있지 않으면 2번값으로 WHERE 절을 날리기 위해서 조금 편하게 만들었다

<html>

<head>

<title>https://hg-96.tistory.com</title>

</head>

<body>

var cnt = new Array();

cnt[0] = new Array();

// 서울

cnt[1] = new Array('강남구','강동구','강북구','강서구','관악구','광진구','구로구','금천구','노원구','도봉구','동대문구','동작구','마포구','서대문구','서초구','성동구','성북구','송파구','양천구','영등포구','용산구','은평구','종로구','중구','중랑구');

// 인천

cnt[2] = new Array('계양구','남동구','동구','미추홀구','부평구','서구','연수구','중구','강화군','옹진군');

// 대전

cnt[3] = new Array('대덕구','동구','서구','유성구','중구');

// 대구

cnt[4] = new Array('남구','달서구','동구','북구','서구','수성구','중구','달성군');

// 울산

cnt[5] = new Array('남구','동구','북구','중구','울주군');

// 부산

cnt[6] = new Array('강서구','금정구','남구','동구','동래구','부산진구','북구','사상구','사하구','서구','수영구','연제구','영도구','중구','해운대구','기장군');

// 광주

cnt[7] = new Array('광산구','남구','동구','북구','서구');

// 세종특별자치시

cnt[8] = new Array('금남면','부강면','소정면','연기면','연동면','연서면','장군면','전동면','전의면','조치원읍','가람동','고운동','나성동','다정동','대평동','도담동','반곡동','보람동','산울동','새롬동','소담동','아름동','어진동','종촌동','집현동','한솔동','합강동','해밀동');

// 경기

cnt[9] = new Array('고양시','과천시','광명시','광주시','구리시','군포시','김포시','남양주시','동두천시','부천시','성남시','수원시','시흥시','안산시','안성시','안양시','양주시','여주시','오산시','용인시','의왕시','의정부시','이천시','파주시','평택시','포천시','하남시','화성시');

// 강원

cnt[10] = new Array('강릉시','동해시','삼척시','속초시','원주시','춘천시','태백시','고성군','양구군','양양군','영월군','인제군','정선군','철원군','평창군','홍천군','화천군','횡성군');

// 충북

cnt[11] = new Array('제천시','청주시','충주시','괴산군','단양군','보은군','영동군','옥천군','음성군','증평군','진천군');

// 충남

cnt[12] = new Array('계룡시','공주시','논산시','당진시','보령시','서산시','아산시','천안시','금산군','부여군','서천군','예산군','청양군','태안군','홍성군');

// 전북

cnt[13] = new Array('군산시','김제시','남원시','익산시','전주시','정읍시','고창군','무주군','부안군','순창군','완주군','임실군','장수군','진안군');

// 전남

cnt[14] = new Array('광양시','나주시','목포시','순천시','여수시','강진군','고흥군','곡성군','구례군','담양군','무안군','보성군','신안군','영광군','영암군','완도군','장성군','장흥군','진도군','함평군','해남군','화순군');

// 경북

cnt[15] = new Array('경산시','경주시','구미시','김천시','문경시','상주시','안동시','영주시','영천시','포항시','고령군','군위군','봉화군','성주군','영덕군','영양군','예천군','울릉군','울진군','의성군','청도군','청송군','칠곡군');

// 경남

cnt[16] = new Array('거제시','김해시','밀양시','사천시','양산시','진주시','창원시','통영시','거창군','고성군','남해군','산청군','의령군','창녕군','하동군','함안군','함양군','합천군');

// 제주

cnt[17] = new Array('서귀포시','제주시');

function change(add) {

sel=document.form1.county

/* 옵션메뉴삭제 */

for (i=sel.length-1; i>=0; i--){

sel.options[i] = null

}

/* 옵션박스추가 */

sel.options[0] = new Option(['전체'], ['']);

for (i=1; i < cnt[add].length; i++){

// new Option(보여지는 값, value);

sel.options[i] = new Option(cnt[add][i-1], cnt[add][i-1]);

}

</script>

시/도:

<option value='세종특별자치시'>세종특별자치시</option>

<option value='제주특별자치도'>제주특별자치도</option>

</select>

구/군:

</select>

</form>

</body>

</html>

더 디벨롭해서 기존에 값이 있으면 선택을 해주는 함수를 구현했다

cnt 는 지역 배열

function dubleSelectBoxCheck(checkId, selectname, optionVal = "", num = '0') {

// 체크 된 this.selectedIndex 가져오기

let selectIdx = document.querySelector(checkId).selectedIndex;

var sel = document.querySelector(selectname)

/* 옵션메뉴삭제 */

for (i=sel.length-1; i>=0; i--){

sel.options[i] = null;

};

/* 옵션박스추가 */

sel.options[0] = new Option([optionVal], ['']);

for (i=1; i < cnt[selectIdx].length; i++){

// new Option(보여지는 값, value);

sel.options[i] = new Option(cnt[selectIdx][i-num], cnt[selectIdx][i-num]);

};

}

<? foreach ($addressList as $key => $value) { ?>

<? } ?>

</select>

</select>