셀렉트값에 따른 내용보여주기
본문
write.skin.php 페이지에서
wr_6값을 선택해서 jQuery를 통해
아래 내용들을 다르게 보여주는것을 만들었는데요.
wr_6값을 선택하고 저장한후
다시 수정할때는 wr_6값은 선택되어 있는데
내용이 아무것도 안보입니다.
wr_6값에 맞게 선택되어져 보이도록 하는 방법이
뭐가 있을까요??
<style>
.tab1 {
display:none;
}
.tab2 {
display:none;
}
.tab3 {
display:none;
}
</style>
<script>
$("#wr_6").change(function(){
if( $(this).val() == '딸기' ) {
$(".tab1").show();
}
else{
$(".tab1").hide();
}
})
$("#wr_6").change(function(){
if( $(this).val() == '토마토' ) {
$(".tab2").show();
}
else{
$(".tab2").hide();
}
})
$("#wr_6").change(function(){
if( $(this).val() == '수박' ) {
$(".tab3").css("display","block");
}
else{
$(".tab3").hide();
}
})
</script>
<select name='wr_6' id='wr_6'>
<option value="">선택하세요.</option>
<option value="딸기" <?php echo ($write['wr_6'] == "딸기") ? "selected" : "";?>>딸기</option>
<option value="토마토" <?php echo ($write['wr_6'] == "토마토") ? "selected" : "";?>>토마토</option>
<option value="수박" <?php echo ($write['wr_6'] == "수박") ? "selected" : "";?>>수박</option>
</select>
<div class="tab1">
딸기내용
</div>
<div class="tab2">
토마토내용
</div>
<div class="tab3">
수박내용
</div>
답변 2
$("#wr_6").change( function(){
$('option', this).each( function(i) {
i == this.parentNode.selectedIndex ? $('.tab' + i).show() : $('.tab' + i).hide();
});
})
$("#wr_6").trigger( 'change' );
감사합니다. 캐시 지우고 하니까 잘됩니다. ^^
<script>태그 안에 아래 코드를 넣어주세요~
$(document).ready(function (){
$("#wr_6").trigger('change');
});
php에서 option값에 selected 속성을 주도록 되어있지만,
페이지가 로드된 후에 해당 엘리먼트의 속성값이 선택되었음을 인지시켜줘야합니다.
(change이벤트를 걸어놓으셨으니 해당 엘리먼트에서 change이벤트를 발생시켜주면 그에따른 동작이 되겠죠?!^^)
감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
