채택완료

셀렉트값에 따른 내용보여주기

2018-03-07 (수) 10:31:26 2,314

write.skin.php 페이지에서

wr_6값을 선택해서 jQuery를 통해

아래 내용들을 다르게 보여주는것을 만들었는데요.

wr_6값을 선택하고 저장한후 

다시 수정할때는 wr_6값은 선택되어 있는데 

내용이 아무것도 안보입니다.

wr_6값에 맞게 선택되어져 보이도록 하는 방법이

뭐가 있을까요??

Copy
<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개 / 댓글 2개

채택된 답변
+20 포인트

$("#wr_6").change( function(){
    $('option', this).each( function(i) { 
        i == this.parentNode.selectedIndex ? $('.tab' + i).show() : $('.tab' + i).hide();
    });
})
$("#wr_6").trigger( 'change' );

답변에 대한 댓글 1개

2018-03-07 (수) 11:35:14
감사합니다. 캐시 지우고 하니까 잘됩니다. ^^
2018-03-07 (수) 10:45:08

<script>태그 안에 아래 코드를 넣어주세요~

Copy
$(document).ready(function (){

$("#wr_6").trigger('change');

});

php에서 option값에 selected 속성을 주도록 되어있지만,

페이지가 로드된 후에 해당 엘리먼트의 속성값이 선택되었음을 인지시켜줘야합니다.

(change이벤트를 걸어놓으셨으니 해당 엘리먼트에서 change이벤트를 발생시켜주면 그에따른 동작이 되겠죠?!^^)

답변에 대한 댓글 1개

2018-03-07 (수) 11:33:50
감사합니다.

답변을 작성하려면 로그인이 필요합니다.