select 숫자 선택후 버튼 클릭시 선택한 숫자만큼 div가 보여지게 하고 싶어요
본문
select 숫자 선택후 버튼 클릭시 선택한 숫자만큼 div가 보여지게 하고 싶어요
<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
javascript onchange 검색해서
셀렉트변경시 class로 열고닫고 하던지하면될듯
감사합니다
하시는 방법을 설명드리면
일단 div에 공통된 클래스를 주시고
윗분 말씀 처럼 이벤트를 체크하시고 체크했을대 현재 select 값을 구하고 해당 만큼 반복문을 돌리면서 그 전에 해당 클래스를 display none 해주시고
eq를 검색하셔서 jquery 로 반복문 돌리면서 해당 숫자만큼만 display block를 해주시면 될거 같습니다.
감사합니다
<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);" >