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
복잡하게 할거 있나요.. 전부 닫고 해당하는것만 열어주시면 되죠
$(function() {
$('#wr_5').change(function() {
var val = $(this).val();
$('.view1').hide();
$('.view2').hide();
$('.view' + val).show();
});
});
공통 클래스가 있다면 클래스 이름으로 닫고 해당하는 id 만 열면 되겠네요
!-->