[jQuery] 셀렉트박스에서 특정 옵션 선택시 레이어 나타내기

2016-08-30

JavaScript

김 태영

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 가 나타게 된다.

JQuery option select selectbox 옵션 선택