onchange 함수

웹에서 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>

참고자료

form에 버튼없이 정보 전달하는 법