셀렉트 박스(select box)라고 불리는 select 태그를 사용한 페이지를 읽을때 만약 데이터베이스에서 불러온 어떤 값을 셀렉트 태그에 자동으로 선택되게 하려면 어떻게 해야하는지 알아보겠습니다. 이용할 방법은 자바스크립트와 제이쿼리입니다.


! select 태그의 값을 지정해서는 안되는지...


물론 value 값을 설정할 수는 있습니다. 하지만 화면에 출력되는 값은 selected 속성값을 가진 option태그만 출력되므로 다른 방법이 필요합니다.


!! 자바스크립트 및 서버언어를 사용하는 방법


결국 해결 방법은 조건문을 사용한 방법 외에는 없는 것 같군요.. 서버사이드 언어를 사용할 경우 선택가능한 모든 옵션값을 적은 뒤 해당 값이 나올 경우 출력해야 합니다. 결국 코드가 길어지기 때문에 자바스크립트나 제이쿼리(jQuery)를 사용하면 더 효과적이겠죠...


# 스크립트 언어(제이쿼리)를 사용한 예제코드 보기


i. HTML 페이지 소스
<select name="fruit" class="fruit" data-fruit="사과">
  <option value="바나나"">바나나</option>
  <option value="수박">수박</option>
  <option value="사과">사과</option>
</select>

ii. 제이쿼리(자바스크립트) 소스
$(document).ready(function () {
  fruit_val = $('select.fruit').attr('data-type');
  $('select.fruit option[value=' + fruit_val + ']').attr('selected', 'selected');
});

혹시 select 태그에 대하여 더 알아보고 싶으신가요? 아래 링크에서 확인해보세요.

셀렉트 박스, select 태그 사용방법 바로가기 > http://webisfree.com/2015-03-06/%5Bhtml%5D-select-%ED%83%9C%EA%B7%B8%28%EB%B0%95%EC%8A%A4%29-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95

선택된 값을 순서대로 불러오는 방법 바로가기 > http://webisfree.com/2014-01-12/[javascript]-select-태그의-값을-순서-index로-찾기-selectedindex