[jQuery/javascript] JSTL을 사용하여 select box 값 고정하기

 

JSTL을 사용하여 select box 값 고정하기

뷰 페이지 (jsp 페이지)를 개발하다 보면 셀렉트박스(select box)를 자주 사용합니다.

셀렉트박스(select box)를 선택하여 화면 이동시 리로딩(새로고침) 되는 페이지를 개발하다보면

리로딩 되어도 선택한 셀렉트박스(select box)의 값(value)이 고정되게 만들어야 할 때가 있습니다.

반응형

 

위의 이미지 처럼 선택한 값이 다시 고정되게 만드려면

뷰 -> 컨트롤러 -> 뷰 (view -> controller -> view) 로 선택한 값을 넘겨주고,

컨트롤러로 부터 뷰 페이지로 넘겨받은 값을 다시 자바스크립트,제이쿼리 또는 JSTL을 사용하여 고정시켜주면 됩니다.

HTML

<select class="form-control" id="test" name="test" onchange="">
    <option value="0" >해지</option>
    <option value="1" >진행</option>
    <option value="2" >완료</option>
</select>

jQuery

뷰에서 보낸 test 값을 컨트롤러에서 받고 다시 뷰로 넘겨 받아 제이쿼리를 사용하여 고정하려면 아래와 같이 사용하면 됩니다.

let test = '${test}';

// value값으로 설정
$("#test").val(test).prop("selected", true);

하지만 위의 코드는 실제로 페이지에서 보면 안좋은 현상이 나타납니다.

html이 로딩되는 시점과 자바스크립트가 실행되는 시점의 차이 때문에 제일 첫번째 "해지" 가 보였다가 고정시킬 값으로 변하는 모습을 볼 수 있습니다.

다시 말해 리로딩(새로고침)이 되면 무조건 "해지" 가 보여지고 "고정시킬 값" 으로 변하는 모습이 시간차로 보여집니다.

깔끔한 모습은 아닌걸 볼 수 있습니다.

728x90

방법1 : 삼항연사자를 사용하기

저는 항상 위의 코드처럼 제이쿼리를 사용해서 셀렉트박스 값을 고정시켰었는데요..

위의 문제점을 보던 사수님께서 더 효율적인 방법을 알려주셨습니다.

좀 생각해보면 간단한 방법인걸 저는 왜 응용을 하지 못했을까요..^^;;;;

셀렉트박스(select box)는 "selected" 라는 속성이 있습니다.

위의 제이쿼리 코드 처럼 "selected" 속성을 줄 수도 있고 그렇지 않을 수도 있습니다.

바로 삼항연산자를 사용하여 selected 속성을 부여 하면 위의 문제가 간단히 해결됩니다.

<select class="form-control" id="test" name="test" onchange="">
    <option value="0" ${test == '0' ? 'selected="selected"' : '' }>해지</option>
    <option value="1" ${test == '1' ? 'selected="selected"' : '' }>진행</option>
    <option value="2" ${test == '2' ? 'selected="selected"' : '' }>완료</option>
</select>

 

방법2: JSTL을 사용하여 응용하기

만약에 컨트롤러에서 넘어온 객체가 리스트라면...?

아래의 코드처럼 JSTL을 사용하여 응용할 수 있습니다.

<select class="form-control" id="test" name="test" onchange="">
    <option value="">전체</option>
    <c:forEach items="${test}" var="testList">
      <option value="${testList.testNo}" ${testList.testNo == 1 ? 'selected="selected"' : ''}>${testList.testNo}</option>
    </c:forEach>
</select>