#지역 선택할 때 '시도' 선택 후 '시구군' 선택하기

공공데이터로 공개된 서점 데이터들을 추가하면서 지역이 다양해졌다.

서울, 경기, 인천, 경남 등이 데이터로 포함되면서 검색 창에서 지역 선택 옵션이 너무 많아졌고 길어졌다.

 

이전 기수 프로젝트에서 1차 2차로 나누어서 옵션을 선택할 수 있게 한 걸 봐서 비슷한 모양으로 구현하고 싶었다.

관련 키워드로 검색해서 코드를 찾고, 일부 수정해서 반영하였다.

 

{#지역 1차 구분하기 위한 함수#}
function categoryChange(e) {
    {#각각의 값이 입력될 때마다 #sigun_name에 나타나는 값임#}
    {#DB에 없는 값은 여기서 제외함#}
    var region_a = ['강남구', '강동구', '강북구', '강서구', '관악구', '광진구', '구로구', '금천구', '노원구', '도봉구', '동대문구', '동작구', '마포구', '서대문구', '서초구', '성동구', '성북구', '송파구', '양천구', '영등포구', '용산구', '은평구', '종로구', '중구', '중랑구'];
    var region_b = ['인천중구', '미추홀구'];
    var region_c = ['가평군', '고양시', '과천시', '광명시', '광주시', '구리시', '군포시', '김포시', '남양주시', '동두천시', '부천시', '성남시', '수원시', '시흥시', '안산시', '안성시', '안양시', '양주시', '양평군', '여주시', '연천군', '오산시', '용인시', '의왕시', '의정부시', '이천시', '파주시', '평택시', '포천시', '하남시', '화성시'];
    var region_d = ['김해시'];
    var target = document.getElementById("sigun_name");

    {# #choose의 option value를 받아서 위의 값에 따라 #sigun_name option들이 출력됨#}
    if (e.value == "a") var d = region_a;
    else if (e.value == "b") var d = region_b;
    else if (e.value == "c") var d = region_c;
    else if (e.value == "d") var d = region_d;

    target.options.length = 0;

    for (x in d) {
        var opt = document.createElement("option");
        opt.value = d[x];
        opt.innerHTML = d[x];
        target.appendChild(opt);
    }
}

select 부분에 모든 선택지를 다 넣었다.

중간에 db를 수정하면서 일부 결과값이 나오지 않는 지역이 있었다.

지역이 보이지 않게 제외할 때 위에 함수에서만 해당 지역을 삭제하고, 아래 select부분은 건드리지 않았다.

혹시 지역이 추가된다면 위에 함수에만 추가하면 된다(아래 select에 이미 포함되었다는 전제 하에).

함수를 다 이해하고 쓴 건 아니라서 html공부하면서 더 찾아봐야 할 것 같다.

 

실제 보이는 콤보박스에 보이는 건 위의 함수에서 작성한 지역명이고, 아래 option value 값과 동일하여 실제 option의 텍스트는 노출되지 않는다.

{#시도 선택시 categoryChange에 따라 #sigun_name에 option 출력됨#}
    <select id="choose" onchange="categoryChange(this)">
        <option value="none">== 지역을 선택하세요 ==</option>
        <option value="a">서울특별시</option>
        <option value="b">인천광역시</option>
        <option value="c">경기도</option>
        <option value="d">경상남도</option>
    </select>
</div>
<div class="select is-info">
    <select id="sigun_name" class="option">
        <option value="none"></option>
        <option value="가평군">가평군</option>
        <option value="고양시">고양시</option>

 

처음 웹페이지에 접속했을 때 1차 지역을 선택하지 않아도 2차 콤보버튼을 누르면 입력된 모든 지역이 나타났다.

이를 해결하기 위해 처음 로드 시 지역 선택 함수가 실행되도록 하고, 함수가 결과값을 출력할 수 없도록 임의값을 넣었다.

다른 더 좋은 방법이 있을 것 같은데 찾지 못했다..

{#로딩 시 #sigun_name의 모든 option이 보이지 않도록 출력할 수 없는 임의 값을 넣음#}
$(document).ready(function () {
    categoryChange("a")
})

그리고 아무 지역도 선택하지 않은 상태에서 검색을 누르면, 검색이 실행되지 않고 안내 멘트가 출력되게 하고 싶었다.

양식은 다른 팀원 분이 로그인 페이지에서 하신 걸 참고해서 코드를 작성했다.

 

if문 작성하는 게 조금 어려웠는데, 1차 콤보박스에 변수값이 none이면 텍스트가 뜨고, 그 외에는 list페이지로 연결되게 하였다.

{# choose는 #choose의 선택된 option value를 가져옴#}
let choose = $('#choose option:selected').val()

{# sigun_name을 서버로 보내고 sigun_name을 다시 받음#}
$.ajax({
    type: 'GET',
    url: '/search',
    data: {sigun_name_give: sigun_name},
    success: function () {
        {#choose값이 none이면 안내문 출력#}
        if (choose == 'none') {
            $("#help-choose").text("지역을 선택해 주세요")
        {#그 외에는 list url을 실행하고 sigun_name을 list페이지로 보냄#}
        } else {
            window.location.href = `/list/sigun_name_give=${sigun_name}`
        }
    }
})