[TIL][240823] HTML 드롭다운 선택 문제 해결

어떤 문제가 있었나?

HTML에서 드롭다운 메뉴의 맨 위 항목이 선택되지 않는 문제가 발생했다. 사용자에게 선택할 수 있는 정렬 옵션을 제공하는 <select> 태그에서 첫 번째 <option>이 기본적으로 선택되지 않거나, 선택하려고 해도 반응하지 않는 상황이었다.

---

무엇을 시도했나?

 

• <option> 태그에 value 속성을 추가하지 않았던 부분이 문제일 수 있다고 생각하여, 모든 <option> 태그에 value 속성을 명시적으로 추가해 보았다.
• 첫 번째 옵션이 기본적으로 선택되도록 selected 속성을 추가해 보았다.
• 자바스크립트 코드에서 옵션이 동적으로 설정되는 부분이 문제인지 확인하기 위해, 자바스크립트 코드에서 value를 명시적으로 설정해 보았다.
• 브라우저 캐시 문제일 가능성을 염두에 두고 브라우저 캐시를 지우고 강력 새로 고침을 시도했다.

---

어떻게 해결됐는가?

value 속성을 명시적으로 추가하고, 첫 번째 옵션에 selected 속성을 추가함으로써 문제가 해결되었다. 자바스크립트 코드와 CSS에서도 별다른 문제는 발견되지 않았다. 결국, value 속성이 누락된 것이 주된 원인이었던 것으로 보인다.

 

또한, 오늘 문제를 해결하면서 아래와 같은 코드를 작성하게 되었다:

<select name="sort" id="sort" onchange="this.form.submit()">
    <option value="recent" id="recent" {% if not request.GET.sort %}selected{% endif %}>최신순</option>
    <option value="like" id="like" {% if request.GET.sort == 'like' %}selected{% endif %}>좋아요순</option>
</select>

---

새로 알게 된 점은 무엇인가?

 

• <option> 태그에서 value 속성이 없을 경우, 특정 브라우저에서는 첫 번째 항목이 선택되지 않는 문제가 발생할 수 있다는 점을 알게 되었다.
• 조건부로 selected 속성을 설정할 때, 서버에서 전달된 값(request.GET.sort)을 기준으로 동적으로 선택 항목을 변경할 수 있다는 점을 배우게 되었다.
• HTML 폼이 변경될 때 자동으로 제출되도록 onchange="this.form.submit()"을 사용하는 방법을 익혔다. 이로 인해 사용자가 선택한 정렬 옵션이 자동으로 적용되어 UX가 향상된다.

---

무엇을 느꼈고 내일은 무엇을 할까?

이번 경험을 통해 HTML과 서버 간의 상호작용을 보다 깊이 이해할 수 있게 되었다.