웹에서 select 박스를 골랐을 때 그 값의 내용을 서버로 전달해서 요리할 수 있게끔 하고 싶었습니다.
그래서 떠오르는 생각은 ajax 방법도 정도...?
그런데 그 마저도 onchange가 일어났을 때 자바스크립트로 selected option값을 가져오는 것은 가능하나 비동기로 서버랑 정보교환이 실패했습니다..
그러던 도중 찾은 보석같은 정보 ...
딱 내가 원하던, select하자마자 그와 관련된 정보들을 추려볼 수 있는 실마리가 보였습니다.
onchange 함수
예제코드
<form method="GET" action="{{ url_for('sortByArea') }}">
<div class="filters-wrap">
<select class="filter-select" id="area" name="area" onchange="this.form.submit()">
<option selected value="지역">지역</option>
<option value="서울특별시">서울특별시</option>
<option value="부산광역시">부산광역시</option>
<option value="대구광역시">대구광역시</option>
<option value="인천광역시">인천광역시</option>
<option value="광주광역시">광주광역시</option>
<option value="대전광역시">대전광역시</option>
<option value="울산광역시">울산광역시</option>
</select>
</div>
</form>
위 코드에서 get방식으로 넘기든 post방식으로 넘기든 정보의 변화가 감지됐을 때 form 태그에 둘려싸여 있다면 submit이 실행됩니다.
포인트는 이 부분입니다!👇
<select onchange="this.form.submit()">목록들</select>
참고자료