셀렉트에 따라 div에 class명 전달시키기
본문
<select name="shot" id="shot"></select>
위와 같이 셀렉트값 변경시, 선택된 값이
아래와 같이 'box' 면
<script>
$(document).ready(function (){
$("#shot").change(function(){
if( $(this).val() == 'box' ) {
$(".box").show();
}
else{
$(".box").hide();
}
})
$("#shot").trigger( 'change' );
});
</script>
클래스명이 .box인 div를 보이거나 안보이게 하는데요...
<div class="box"></div>
<div class="stick"></div>
<div class="pencil"></div>
<div class="letter"></div>
<div class="bowl"></div>
...
box말고 stick,pencil,letter,bowl... 수백개가 있는 경우
선택된 셀렉트값이 자동으로 div 클래스명에 적용되게하는 방법이 없을까요?
도움 부탁드립니다.
답변 1
<style>
#wrap div { display:none; }
</style>
<script src="http://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(function() {
$("#shot").on("change", function() {
$("#wrap div").hide();
$("." + $(this).val()).show();
});
});
</script>
<select name="shot" id="shot">
<option value="">선택</option>
<option value="box">box</option>
<option value="stick">stick</option>
</select>
<div id="wrap">
<div class="box">box</div>
<div class="stick">stick</div>
<div class="pencil">pencil</div>
<div class="letter">letter</div>
<div class="bowl">bowl</div>
</div>
정확히 어떤 걸 원하시는지 몰라서 처음엔 전부 감춰져 있다가 #shot에서 선택한 값의 class만 보이게 했습니다.
감사합니다^^
답변을 작성하시기 전에 로그인 해주세요.