select
에서 특정 option
선택시 레이어를 보여주고 숨기고 할 수 있는 스크립트.
jQuery
jQuery('#selectBox').change(function() {
var state = jQuery('#selectBox option:selected').val();
if ( state == 'option2' ) {
jQuery('.layer').show();
} else {
jQuery('.layer').hide();
}
});
스크립트를 추가하고
HTML
<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="layer">내용</div>
마크업을 한 뒤
CSS
.layer { display: none; }
CSS 로 .layer
를 숨겨놓는다.
“옵션2” 라는 option
이 선택되면 value
의 값을 확인하여 조건이 맞다면 .layer
가 나타게 된다.