KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

select 항목 선택시 숨기고 출력하고

그누보드5
영카트5
스터디
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
부가서비스
KCP 이벤트!
select 항목 선택시 숨기고 출력하고

QA

select 항목 선택시 숨기고 출력하고

본문

처음에는 select 부분만 보이고있다..

select항목에서 선택시 해당하는 항목만 보이게 하려합니다.

 

 

여기서 부터 막혀서 도움 좀 청합니다.

감사합니다.

소스는 아래 올려 드립니다. --

 

 

select소스 시작

<div class="bo_w_select write_div">
        <div class="input-group ">
            <label for="row" class="label-box">분류<strong class="sound_only">필수</strong></label></label>
            <div class="select-box">    
                <select name="wr_5" id="wr_5" required class="select-type required">
                    <option value="">선택하세요</option>
                    <option value="1" <?=$wr_5==1 ? 'selected':''?>>개요</option>
                    <option value="2" <?=$wr_5==2 ? 'selected':''?>>상영작</option>
                    <option value="3" <?=$wr_5==3 ? 'selected':''?>>스케치</option>                    
                </select>
            </div>
        </div>
    </div>

select소스 끝

 

 

 

개요시 보이게

<div class="bo_w_tit write_div">
        <div class="input-group">
            <label for="wr_6" class="label-box">주제<strong class="sound_only">필수</strong></label>
            <div class="input-box">
                <input type="text" name="wr_6" value="<?php echo $wr_6 ?>" id="wr_6"  class="input-type " size="50" maxlength="255" placeholder="주제">
            </div>
        </div>
    </div>

개요시 보이게

 

 

상영작시  보이게

    <div class="bo_w_tit write_div">
        <div class="input-group">
            <label for="wr_7" class="label-box">개최기간<strong class="sound_only">필수</strong></label>
            <div class="input-box">
                <input type="text" name="wr_7" value="<?php echo $wr_7 ?>" id="wr_7"  class="input-type " size="50" maxlength="255" placeholder="개최기간">
            </div>
        </div>
    </div>

상영작시  보이게

 

 

 

 

스크립트 소스 입니다.

   $(function() {
        $('.veiw2').toggle($('#wr_5').val()==2);
        $('.veiw1').toggle($('#wr_5').val()==1);
        $('#wr_5').change(function() {
            var val = $(this).val();            
            $('.veiw1').toggle(val==1);            
            $('.veiw2').toggle(val==2);            
        });
    });

 

 

 

이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기

이 질문에 댓글 쓰기 :

답변 1

채택됨

백수1995님의 답변

복잡하게 할거 있나요.. 전부 닫고 해당하는것만 열어주시면 되죠


$(function() {
   $('#wr_5').change(function() {
      var val = $(this).val();            
      $('.view1').hide(); 
      $('.view2').hide(); 
      $('.view' + val).show(); 
   });
});

공통 클래스가 있다면 클래스 이름으로 닫고 해당하는 id 만 열면 되겠네요

주소복사
채택됨
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 92,627 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT