채택완료

select 숫자 선택후 버튼 클릭시 선택한 숫자만큼 div가 보여지게 하고 싶어요

select 숫자 선택후 버튼 클릭시 선택한 숫자만큼 div가 보여지게 하고 싶어요
 

 

Copy
<form id="myform" name="book_num" >
        <label for="r_type">입력창 숫자</label>
        <select class="form-control" id="sel_num" name="sel_num">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>

        <!-- 선택한 입력창 숫자만큼 div가 보여지게 하고 싶어요 -->
    <input type="button" name="" value="선택하기">
    
    </form>

        <!-- 3을 선택하면 3개 보여짐 / 4을 선택하면 4개 보여짐 -->
        <div style="display: none" id="1">
     1의 내용
        </div>    

        <div style="display: none" id="2">
     2의 내용
        </div>    

        <div style="display: none" id="3">
     3의 내용
        </div>    

        <div style="display: none" id="4">
     4의 내용
        </div>    

        <div style="display: none" id="5">
     5의 내용
        </div>    

        <div style="display: none" id="6">
     6의 내용
        </div>

 

 

답변 3개 / 댓글 2개

채택된 답변
+20 포인트

javascript onchange 검색해서

셀렉트변경시 class로 열고닫고 하던지하면될듯

답변에 대한 댓글 1개

<script>

function set_divs( n) {

switch( n) {

case 6: $('#6').css( 'display', 'block');

case 5: $('#5').css( 'display', 'block');

case 4: $('#4').css( 'display', 'block');

case 3: $('#3').css( 'display', 'block');

case 2: $('#2').css( 'display', 'block');

case 1: $('#1').css( 'display', 'block');

}

switch( n) {

case 1: $('#2').css( 'display', 'none');

case 2: $('#3').css( 'display', 'none');

case 3: $('#4').css( 'display', 'none');

case 4: $('#5').css( 'display', 'none');

case 5: $('#6').css( 'display', 'none');

}

}

</script>

 <select class="form-control" id="sel_num" name="sel_num" onchange="set_divs( this.value);" >

하시는 방법을 설명드리면 

일단 div에 공통된 클래스를 주시고

윗분 말씀 처럼 이벤트를 체크하시고 체크했을대 현재 select 값을 구하고 해당 만큼 반복문을 돌리면서 그 전에 해당 클래스를 display none 해주시고

eq를 검색하셔서 jquery 로 반복문 돌리면서 해당 숫자만큼만 display block를 해주시면 될거 같습니다.

답변에 대한 댓글 1개

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