선택된 셀렉션 값에 따라 div 영역 보여주기?
본문
또 질문을 드려봅니다. 매번 답변해주시는 분들께 진심으로 감사의 말씀드립니다.
셀렉트 옵션에서 선택된 값이 for문에 들어가서 아래의 내용처럼 선택된 갯수 만큼 <div> 영역이 보여지게끔 하고 싶은데요.
<select name="wr_3" required>
<option value="">선택하세요</option>
<option value="1" <? if ($wr_3=="1") echo 'selected'; ?>>1</option>
<option value="2" <? if ($wr_3=="2") echo 'selected'; ?>>2</option>
<option value="3" <? if ($wr_3=="3") echo 'selected'; ?>>3</option>
<option value="4" <? if ($wr_3=="4") echo 'selected'; ?>>4</option>
<option value="5" <? if ($wr_3=="5") echo 'selected'; ?>>5</option>
</select>
<?php for ($i = 0; $i <= $wr_3; $i++) { ?>
<div id="#<?php echo $i; ?>">div #<?php echo $i; ?> 영역</div>
<?php } ?>
문제는 셀렉트 옵션값(wr_3) 값이 DB에 저장되어야지만 for 구문이 돌아갈 것 같은데요.
실시간으로 셀렉트 옵션(wr_3)을 선택한 것만큼 div 영역이 보여지게 하는 방법이 있을까요?
찾아보니 자바스크립트로 셀렉션 선택값에 따라 div 영역을 보여주는 내용이 있었습니다만,
선택된 자바스크립트 값을 바로 php for문에 적용하는 방법을 모르겠네요..
제가 참고할 만한 내용이 있을까요?
답변 1
<select name="wr_3" id="wr3" required>
<option value="">선택하세요</option>
<option value="1" <? if ($wr_3=="1") echo 'selected'; ?>>1</option>
<option value="2" <? if ($wr_3=="2") echo 'selected'; ?>>2</option>
<option value="3" <? if ($wr_3=="3") echo 'selected'; ?>>3</option>
<option value="4" <? if ($wr_3=="4") echo 'selected'; ?>>4</option>
<option value="5" <? if ($wr_3=="5") echo 'selected'; ?>>5</option>
</select>
<div id="wr_box_1"<? if ($wr_3 != "1") echo 'style="display:none"'; ?> class="wr_box">div #1 영역</div>
<div id="wr_box_2"<? if ($wr_3 != "2") echo 'style="display:none"'; ?> class="wr_box">div #2 영역</div>
<div id="wr_box_3"<? if ($wr_3 != "3") echo 'style="display:none"'; ?> class="wr_box">div #3 영역</div>
<div id="wr_box_4"<? if ($wr_3 != "4") echo 'style="display:none"'; ?> class="wr_box">div #4 영역</div>
<div id="wr_box_5"<? if ($wr_3 != "5") echo 'style="display:none"'; ?> class="wr_box">div #5 영역</div>
<script type="text/javascript">
$(function() {
$('#wr3').change(function() {
$('.wr_box').css('display', 'none');
var id = $('#wr3 option:selected').val();
$('#wr_box_'+ id).css('display', 'block');
})
})
</script>
자바스크립트 결과를 php에 반영?하는 방법은 ajax뿐입니다.(socket 등등도 가능)
<div id="wr_box_1"<? if ($wr_3 > "2") echo 'style="display:none"'; ?> class="wr_box">div #1 영역</div>
<div id="wr_box_2"<? if ($wr_3 > "3") echo 'style="display:none"'; ?> class="wr_box">div #2 영역</div>
<div id="wr_box_3"<? if ($wr_3 > "4") echo 'style="display:none"'; ?> class="wr_box">div #3 영역</div>
<div id="wr_box_4"<? if ($wr_3 > "5") echo 'style="display:none"'; ?> class="wr_box">div #4 영역</div>
<div id="wr_box_5"<? if ($wr_3 > "6") echo 'style="display:none"'; ?> class="wr_box">div #5 영역</div>
.<select 선택으로 html을 조정하는 것은 javascript로 하셔야 합니다.
<script type="text/javascript">
$(function() {
$('#wr3').change(function() {
$('.wr_box').css('display', 'none');
var id = $('#wr3 option:selected').val();
for( i=1; i<= id; i++)
$('#wr_box_'+ i).css('display', 'block');
})
})
</script>
