아래의 셀렉트박스에서 선택된 값과 id값이 같은 div만 display block이 되도록 하고싶은데요...
지금은 선택되는 셀렉트가 모두 display block으로 바뀐채로 유지됩니다.
선택 외 나머지 id는 display none으로 바뀌도록 할 수 있을까요?
div의 기본값은 ddisplay none으로 했습니다.
Copy
<form name="form1">
<select name="bxCheck" onChange=view()>
<option value="">선택</option>
<option value="t_01">1</option>
<option value="t_02">2</option>
<option value="t_03">3</option>
</select>
</form>
<script>
function view(target) {
var sel = form1.bxCheck.value;
document.getElementById(sel).style.display='block';
}
</script>
<style>
#t_01, #t_02, #t_03 {display:none;}
</style>
<div id="t_01">1</div>
<div id="t_02">2</div>
<div id="t_03">3</div>답변 2개 / 댓글 2개
채택된 답변
+20 포인트
2018-05-16 (수) 15:03:10
function view(sel) {
for (var i=1; i <4; i++)
document.getElementById('t_0'+i).style.display=form1.bxCheck.value == 't_0'+i ? 'block' : 'none';
}
답변에 대한 댓글 1개
EvaTuna
2018-05-16 (수) 14:50:23
Copy
<script src="<?php echo G5_JS_URL ?>/jquery-1.8.3.min.js"></script>
<script>
$('select[name="bxCheck"]').change(function(){
var sel = $(this).val();
$('div').css('display','none');
$('div#'+sel).css('display','block');
});
</script>스크립트를 해당코드로 바꿔보세요
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.