2021-07-16 94일차

큐

• 커뮤니티 검색기능 중 검색타입 선택하는 셀렉트 박스가 검색해서 페이지가 리프레시 될 경우에 기본값으로 돌아가지 않도록 선택한 값 유지하게 변경

자주하는 실수

내가 모르는 것

• $( document ).ready(function()이랑$(function()이 같은거라고 하는데, $(function()으로 작성했을땐 실행자체가 되지 않다가 $( document ).ready(function()로 실행하니까 바로 실행이되었다. 스크립트에 문제는 없어보이는데 실행자체가 안되서 한참 고생했었다.

느낀점

• 처음엔 셀렉트 박스에 selected를 넣으면 선택이 되기때문에 변수를 3개 만들었다.
• 엘비스 연산자를 사용해 param에 넘어오는 searchKeywordTypeCode를 비교해서 일치하면 selected 아니면 공백을 넣어주는 식으로 변수를 만들었다.

<c:set var="selectTitle" value="${searchKeywordTypeCode.equals('title') ? 'selected' : ''}" />
<c:set var="selectBody" value="${searchKeywordTypeCode.equals('body') ? 'selected' : ''}" />
<c:set var="selectTitleAndBody" value="${searchKeywordTypeCode.equals('title,body') ? 'selected' : ''}" />

• 이후, opction 안에 한개씩 넣어주었다

<option ${selectTitle} value="title">제목</option>
<option ${selectBody} value="body">내용</option>
<option ${selectTitleAndBody} value="title,body">제목,내용</option>

• 이후 자바스크립트로 짜면 간단하게 할 수 있다는걸 들었고, 자바스크립트로 구조를 변경했다.

<script>
  $( document ).ready(function() {
    $("select[name='searchKeywordTypeCode']").val((('${param.searchKeywordTypeCode}' == '') ? "" :'${param.searchKeywordTypeCode}')).prop("selected", true);
  });
</script>

위에서 사용한 방법보다 깔끔하게 할 수 있었다.