[jQuery] Select Box 특정 옵션 선택시 show / hide

<select id="selectBox" name="selectBox">
  <option value="" selected="selected">전체</option>
  <option value="option1">옵션1</option>
  <option value="option2">옵션2</option>
  <option value="option3">옵션3</option>
</select>
<div class="div1"> 
</div>

 

1. Select Box 'id'로 접근하여 선택된 값 읽기 

$("#selectBox option:selected").val();

 

2. Select Box 'name'으로 접근하여 선택된 값 읽기 

$("select[name=selectBox]").val();

 

3. Select Box 선택한 옵션 'index' 값 얻기 

$("#selectBox option").index($("#selectBox option:selected"));

 

4. Select Box 특정 옵션 선택시 div show/hide

셀렉트 박스 옵션 선택 시 원하는 옵션에 조건을 주고

그 조건이 맞다면 div 디자인 보이기 숨기기 

$(document).ready(function() {
  $('#selectBox').change(function() {
    var result = $('#selectBox option:selected').val();
    if (result == 'option2') {
      $('.div1').show();
    } else {
      $('.div1').hide();
    }
  }); 
}); 

 

 

 

참고 : pjd1007.tistory.com/36