jQuery(제이쿼리) 강좌와 예제모음

[폼요소 SELECT] 선택한 것 제외하고 다른 select 값 초기화 하기

전체 기초강좌 만들어보기 초급예제 중급예제 그렇군 대기중 jQuryUI 예제
URL : https://ktsmemo.cafe24.com/s/jquery/125
등록일 :

셀렉트 박스 초기화 하기

여러개의 셀렉트 박스가 있을때 선택한 것을 제외하고
다른 것들의 상태를 초기화 시키는 예제입니다.

- 아래 셀렉트 박스를 이것 저것 선택해 보세요.
- 현재 선택한것을 제외하고 다른것의 상태가 초기화 됩니다.

CSS

.gogogo select {
	width:120px;
	padding:5px;
}

HTML

<div class="gogogo">
	<select onchange="gogogo(this)">
		<option value="">- 카테고리 -</option>
		<option value="">MicroSD메모리</option>
		<option value="">SD메모리</option>
		<option value="">CF메모리</option>
		<option value="">메모리스틱</option>
		<option value="">XQD메모리</option>
	</select>
	<select onchange="gogogo(this)">
		<option value="">- 브랜드 -</option>
		<option value="">싼디스크</option>
		<option value="">삼숭전자</option>
		<option value="">트랜싼드</option>
		<option value="">소닉</option>
		<option value="">랙사</option>
		<option value="">올바른전자</option>
		<option value="">어른나비</option>
		<option value="">도시바ㄹ</option>
		<option value="">가프로</option>
	</select>
	<select onchange="gogogo(this)">
		<option value="">- 혜택 -</option>
		<option value="">무료배송</option>
		<option value="">카드할인</option>
		<option value="">쿠폰</option>
		<option value="">적립</option>
		<option value="">날가져요 엉엉</option>
	</select>
</div>

자바스크립트

function gogogo(o){
	$('option:first', $('.gogogo select').not(o)).prop('selected', true);
	// $('.gogogo select') - gogogo 클래스 에서 select 찾기
	// .not(o) - 찾은 것 중 현재것(클릭한것)을 제외하기
	// $('option:first, - 찾은 select 들의 option 중 첫번째 것 찾기
	// .prop('selected', true) - selected 를 적용해서 선택 상태로 해주기
}