24'C 구름 많음
서울 강남구
가끔 퍼블리셔분들이 form 태그안에 전달해야 할 내용을 화면 구성때문에 정보를 전달할 수 없는 tag로 퍼블 작업을 넘길때가 있다
다음의 경우이다
<li class="select">
<label for="">졸업여부<img src="img/require.png" alt=""></label>
<div class="ect_inner">
<p class="title">-</p>
<ul class="p_item">
<li><a href="javascirpt:;">Yes</a></li>
<li><a href="javascirpt:;">No</a></li>
</ul>
</div>
<div class="ect_inner">
<p class="title">-</p>
<ul class="p_item">
<li><a href="javascirpt:;">Yes</a></li>
<li><a href="javascirpt:;">No</a></li>
</ul>
</div>
<div class="ect_inner">
<p class="title">-</p>
<ul class="p_item">
<li><a href="javascirpt:;">Yes</a></li>
<li><a href="javascirpt:;">No</a></li>
</ul>
</div>
</li>
<!--select end-->
<script>
$('.select .title').each(function(){
$(this).on('click',function(){
$(this).siblings('.p_item').stop().slideToggle();
$(this).toggleClass('on');
});
});
$('.select .ect_inner').find('.p_item').children('li').each(function(){
$(this).on('click',function(){
$(this).parent('ul').stop().slideUp();
$('.p_item li').removeClass('on');
$(this).addClass('on');
var titleValue = $(this).text();
$(this).parent('.p_item').siblings('.title').text(titleValue);
});
});
</script>
이런 작업은 좀 난감한 경우이지만 이럴 때에는 input 의 type hidden 속성과 jqury를 사용해서 해결할 수 있다
input hidden 을 생성 -> jqury 함수에 hidden 값을 넣어 줄 수 있는 프로그래밍을 추가 작성
코드
<li class="select">
<label for="">졸업여부<img src="<?php echo G5_IMG_URL?>/require.png" alt=""></label>
<input type="hidden" value="" id="wr_education1_g" name="wr_education1_g">
<input type="hidden" value="" id="wr_education2_g" name="wr_education2_g">
<input type="hidden" value="" id="wr_education3_g" name="wr_education3_g">
<div class="ect_inner">
<p class="title" >-</p>
<ul class="p_item">
<li d="wr_education1_g" ><a href="javascirpt:;">Yes</a></li>
<li d="wr_education1_g" ><a href="javascirpt:;">No</a></li>
</ul>
</div>
<div class="ect_inner">
<p class="title">-</p>
<ul class="p_item" id="g2">
<li d="wr_education2_g"><a href="javascirpt:;">Yes</a></li>
<li d="wr_education2_g"><a href="javascirpt:;">No</a></li>
</ul>
</div>
<div class="ect_inner">
<p class="title">-</p>
<ul class="p_item" id="g3">
<li d="wr_education3_g"><a href="javascirpt:;">Yes</a></li>
<li d="wr_education3_g"><a href="javascirpt:;">No</a></li>
</ul>
</div>
</li>
<!--select end-->
<script>
$('.select .title').each(function(){
$(this).on('click',function(){
$(this).siblings('.p_item').stop().slideToggle();
$(this).toggleClass('on');
});
});
$('.select .ect_inner').find('.p_item').children('li').each(function(){
$(this).on('click',function(){
$(this).parent('ul').stop().slideUp();
$('.p_item li').removeClass('on');
$(this).addClass('on');
var titleValue = $(this).text();
$(this).parent('.p_item').siblings('.title').text(titleValue);
var d=$(this).attr('d');
var real_v=document.getElementById(d);
real_v.value=titleValue;
});
});
</script>