셀렉트에 따라 div에 class명 전달시키기 채택완료
망이망소이
6년 전
조회 2,697
<select name="shot" id="shot"></select>
위와 같이 셀렉트값 변경시, 선택된 값이
아래와 같이 'box' 면
</p>
<p><script></p>
<p>$(document).ready(function (){</p>
<p>$("#shot").change(function(){
if( $(this).val() == 'box' ) {
$(".box").show();
}
else{
$(".box").hide();</p>
<p> }
})</p>
<p>$("#shot").trigger( 'change' );</p>
<p>});</p>
<p></script></p>
<p>클래스명이 .box인 div를 보이거나 안보이게 하는데요...
</p>
<p><div class="box"></div></p>
<p><div class="stick"></div></p>
<p><div class="pencil"></div></p>
<p><div class="letter"></div></p>
<p><div class="bowl"></div></p>
<p>...</p>
<p>
box말고 stick,pencil,letter,bowl... 수백개가 있는 경우
선택된 셀렉트값이 자동으로 div 클래스명에 적용되게하는 방법이 없을까요?
도움 부탁드립니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
6년 전
</p>
<p><style>
#wrap div { display:none; }
</style>
<script src="<a href="http://code.jquery.com/jquery-2.2.4.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-2.2.4.js"></script></a>
<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></p>
<p>정확히 어떤 걸 원하시는지 몰라서 처음엔 전부 감춰져 있다가 #shot에서 선택한 값의 class만 보이게 했습니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
망이망소이
6년 전
감사합니다^^
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인