[JS] HTML 드롭다운(dropdown) 2개 연결

🔎 2개의 드롭 다운 연결

내가 진행 중인 프로젝트에 드롭다운을 2개를 놓고, 그 선택한 값들을 서버에 post 하려고 한다.

처음에는 아무 생각없이 드롭다운 복붙을 했는데, 될리가 있나 ... 

 

다시 생각을 하고 방법을 찾아봤다.

그래서 오늘 포스팅은 2개의 dropdown을 종속적으로 연결하는 방법에 대한 글이다.

---

📙 2개 드롭다운 만들기

<form id="myForm" action="/board" method="POST">
    <label for="citySelect"> 지역</label>
    <select id="citySelect" name="city">
        <option value="광주광역시">광주광역시</option>
        <option value="대전광역시">대전광역시</option>
    </select>

    <label for="districtSelct"> 구역 선택</label>
    <select id="districtSelct" name="district">
        <option value="">Select a district</option>
    </select>
    <button type="submit">Submit</button>
</form>

 

우선 2개의 드롭다운을 만들어 준다. 

 

<form id="myForm" action="/board" method="POST">
~~~
<button type="submit">Submit</button>

이 부분은 서버에 전송하기 위한 코드이다.  (서버에 전송하지 않으면 필요 X)

 

첫번째 드롭다운 : 

citySelect의 드롭 다운을 만들어준다.  (안의 value가 너무 많으면 코드가 길어져 생략)

 

두번째  드롭다운:

내부에 구역을 넣으면 첫번째 값에 종속되지 않는다.  서로 연결시키기 위해서는 JS를 써야한다.

 

 

📙 JS로 드롭다운 연결

 document.getElementById('citySelect').addEventListener('change', function () {
                    var city = this.value;
                    var optionsSelect = document.getElementById('districtSelct');
                    while (optionsSelect.length > 1) {
                        optionsSelect.remove(1);
                    }

                    var exampleOptions;
                   if (city === '광주광역시') {
                        exampleOptions = [
                            { value: "광산구", text: "광산구" },
                            { value: "남구", text: "남구" },
                            { value: "동구", text: "동구" },
                            { value: "북구", text: "북구" },
                            { value: "서구", text: "서구" }
                        ];
                    } 
                    else if (city === '대전광역시') {
                        exampleOptions = [
                            { value: "대덕구", text: "대덕구" },
                            { value: "동구", text: "동구" },
                            { value: "서구", text: "서구" },
                            { value: "유성구", text: "유성구" },
                            { value: "중구", text: "중구" }
                        ];
                    }

                    exampleOptions.forEach(option => {
                        var optionElement = document.createElement('option');
                        optionElement.value = option.value;
                        optionElement.textContent = option.text;
                        optionsSelect.appendChild(optionElement);
                    });
                });

 

 

document.getElementById('citySelect').addEventListener('change', function () {

 

 

select 요소에 citySelect가 선택 될 때마다 호출되는 change 이벤트 리스너 추가 

(chage는 값이 변경되었을 때 방생하는 이벤트)

 

var city = this.value;

 

선택된 도시를 가져온다. (광주광역시 선택했으면, city는 광주광역시가 됨)

 

var optionsSelect = document.getElementById('districtSelct');

 

업데이트 할 구역 (district) ID 가져오기 

 

while (optionsSelect.length > 1) {
    optionsSelect.remove(1);
}

 

이전에 업데이트 된 옵션이 있다면 모두 제거 

 

var exampleOptions;
if (city === '광주광역시') {
    exampleOptions = [
        { value: "광산구", text: "광산구" },
        { value: "남구", text: "남구" },
        { value: "동구", text: "동구" },
        { value: "북구", text: "북구" },
        { value: "서구", text: "서구" }
    ];
} 
else if (city === '대전광역시') {
    exampleOptions = [
        { value: "대덕구", text: "대덕구" },
        { value: "동구", text: "동구" },
        { value: "서구", text: "서구" },
        { value: "유성구", text: "유성구" },
        { value: "중구", text: "중구" }
    ];
}

 

구역(district)에서 만들어질 목록들 생성

 

exampleOptions.forEach(option => {
    var optionElement = document.createElement('option');
    optionElement.value = option.value;
    optionElement.textContent = option.text;
    optionsSelect.appendChild(optionElement);
});

 

 

exampleOptions에 저장된 옵션들 반복문을 통해 실행

 

1. html의 option 요소 생성

 

2. value와 textContent를 exampleOption 배열값을 부터 할당 받음

 

3. 만들어진 optionElement를 optionSelect ( districtSelect)에 추가

 

 

[전체적인 흐름]

- 도시에서 선택 받은 값으로 조건에 맞는 구역(district) 선택

- 선택된 구역에 배열들을 districtSelect ID에 추가 

 

 

이렇게하면 이제 두 드롭다운이 종속적으로 연결된다.

 

 

📙 페이지 리로드 방지 (새로고침 방지)

 

  document.getElementById('myForm').addEventListener('submit', function (event) {
        event.preventDefault(); // 폼 제출 기본 동작 방지
        var formData = new FormData(this);
        fetch('/board', {
            method: 'POST',
            body: formData
        })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
            })               
            .catch(error => {
                console.error('Error:', error);
            });
});

 

 

다 좋은데, 드롭다운 옵션들을 선택하고 submit을 누르면 페이지가 리로드가 된다.

이를 방기 하기 위한 코드이다.

 

  event.preventDefault();

 

event.preventDefalt() 는 폼의 기본 제출 동작을 막는다.

 

  fetch('/board', {
        method: 'POST',
        body: formData
    })

 

fetch로 비동기적 서버와 데이터를 주고 받는데, post 방식으로 formData를 서버로 보낸다.

 

 .then(response => response.json())

 

서버로부터 응답을 json 형식으로 변환하여 받는다. 

이 응답을 통해 데이터가 잘 전송되었는지 알 수 있다.

 

이렇게하면 submit 제출시 페이지가 리로드 되는것을 막을 수 있다.