본문 바로가기

개발/Web

select 이용 동적테이블

반응형
//스크립트 부분
function select_change() {
 var select = document.getElementById('select id');
 var val = select.value;
 // select box의 value를 변수 var에 담아 비교하여 각각의 테이블 스타일에 적용한다.0
 if (val == 'option값') {
  document.all.테이블 id.style.display = 'inline';
  document.all.테이블 id.style.display = 'none';
 } else if (val == option값') {
  document.all.테이블 id.style.display = 'none';
  document.all.테이블 id.style.display = 'inline';
 } else{
  document.all.테이블 id.style.display = 'none';
  document.all.테이블 id.style.display = 'none';
 }
}

//select box
<SELECT NAME="b_way" id="b_way" onchange="select_change();">
   <OPTION VALUE="none" SELECTED>선택하세요</OPTION>
   <OPTION VALUE="b_bank">자동이체</OPTION>
   <OPTION VALUE="b_card">카드결제</OPTION>
</SELECT>

//테이블 디자인
<table id="테이블 id" style="display:none">
<tr>
<td></td>
</tr>
</table>
반응형

자바스크립트를 허용해주세요.
[ 자바스크립트 활성화 방법 ]
from Mohon Aktifkan Javascript!