자바스크립트 폼값 유지 예제
자바스크립트 폼값 유지 예제 more..
질문자인사 감사합니다 궂이제가 저렇게 한건 처음 고객유형으로 변수 값을 가지고 다른 셀렉트박스 디비를 불러 오고 있었어 입니다 그리고 패라미터 값을 넘길때 셀렉트 박스의 변수선택시 나오는 변수 외에 다른 값도 넘겨 주고 있습니다 이문제를 어케 풀어야 할지 걱정입니다
셀렉트 콤보박스가 변경될때는 해당 페이지가 변화하지 않고 셀렉크 콤보의 값만 따로 다른 페이지에서 가져와
변경을 해주어야 합니다.
이런 방법으로는 여러가지방법이 있는데 대표적인것이 AJAX 이고 그밖에도 Script 를 이용한 정적인 화면
표현과 iframe 을 이용한 방법등등... 이 있습니다.
예를 들어서
select_option.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> select_option.html </title>
<script>
<!--
var fm;
var listData = new Array();
var map2 = new Array();
var map3 = new Array();
function getCont( url ) // 데이터 처리 함수
{
fm = document.frm;
var obj = document.getElementById('cont');
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open('GET', url, false);
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');
xmlhttp.onreadystatechange = function ()
{
if( xmlhttp.readyState == '4' )
{
listData = xmlhttp.responseText.split('\r\n');
var cgp1 = '';
var cgp2 = '';
var group2 = new Array();
var group3 = new Array();
var dft1 = 0;
var dft2 = 0;
for( var i=0; i<listData.length; i++ )
{
var row = listData[i].split('\t');
switch( row.length )
{
case 1 :
fm.gp0.length = fm.gp0.length + 1;
fm.gp0.options[fm.gp0.length-1].value = row[0];
fm.gp0.options[fm.gp0.length-1].text = row[0];
cgp1 = row[0];
group2 = new Array();
dft1++;
break;
case 2 :
if( dft1 == 1 )
{
fm.gp1.length = fm.gp1.length + 1;
fm.gp1.options[fm.gp1.length-1].value = row[1];
fm.gp1.options[fm.gp1.length-1].text = row[1];
}
group2.push(row[1]);
map2[cgp1] = group2;
cgp2 = row[1];
group3 = new Array();
dft2++;
break;
case 3 :
if( dft2 == 1 )
{
fm.gp2.length = fm.gp2.length + 1;
fm.gp2.options[fm.gp2.length-1].value = row[2];
fm.gp2.options[fm.gp2.length-1].text = row[2];
}
group3.push(row[2]);
map3[cgp2] = group3;
break;
}
}
}
}
xmlhttp.send();
}
function fncInit()
{
getCont( './select_option_data.html' );
}
function fncChg( obj )
{
var al;
if( obj.flg == '0' )
{
al = map2[obj.value];
for( var i=0; i<al.length; i++ )
{
fm.gp1.length = (i+1);
fm.gp1.options[i].value = al[i];
fm.gp1.options[i].text = al[i];
}
}
else if( obj.flg == '1' )
{
al = map3[obj.value];
for( var i=0; i<al.length; i++ )
{
fm.gp2.length = (i+1);
fm.gp2.options[i].value = al[i];
fm.gp2.options[i].text = al[i];
}
}
}
//-->
</script>
<script id='dummy'></script>
</head>
<body onload='javascript:fncInit();'>
<form name='frm'>
<select name='gp0' onchange='javascript:fncChg(this);' flg='0'></select>
<select name='gp1' onchange='javascript:fncChg(this);' flg='1'></select>
<select name='gp2'></select>
</form>
</body>
</html>
select_option_data.html
컴퓨터
[탭]프로그래밍
[탭][탭]개발툴
[탭][탭]웹프로그래밍
[탭][탭]게임프로그래밍
[탭][탭]자바스크립트
[탭]운영체제
[탭][탭]MS 윈도우즈
[탭][탭]리눅스
[탭][탭]유닉스
[탭][탭]솔라리스
[탭]네트워크
[탭][탭]초고속인터넷
[탭][탭]FTP
[탭][탭]이동통신
[탭][탭]네이버폰
게임
[탭]롤플레잉
[탭][탭]리니지
[탭][탭]디아블로
[탭][탭]메이플스토리
[탭][탭]아크로드
[탭]전략시뮬
[탭][탭]스타크래프트
[탭][탭]삼국지
[탭][탭]워크래프트
[탭]아케이드
[탭][탭]오디션
[탭][탭]알투비트
[탭][탭]크레이지아케이드
엔터테인먼트
[탭]영화
[탭][탭]영화제작
[탭][탭]영화작품
[탭][탭]영화관
[탭][탭]영화감독
[탭]TV라디오
[탭][탭]드라마
[탭][탭]예능
[탭][탭]교양정보
[탭][탭]뉴스시사
[탭]연예인
[탭][탭]가수
[탭][탭]탤런트
[탭][탭]영화배우
[탭][탭]모델
[탭][탭]코미디언
두개의 파일을 같은 폴더에 지정된 이름으로 생성하신 후 실행 하시면 화면은 그대로인데
셀렉트 콤보 박스만 변하는 것을 아실 수 있습니다.
데이터 부분은 원래 select_option_data.html 이 아닌 DB 에서 가져와 뿌려 줘야 하지만
예제를 만들때 DB 를 접속할수 없으므로 임의의 방식으로 만든것이므로 변경하여 사용하시여 하고
데이터의 [탭] 부분은 실제 탭으로 변경을 하셔야 합니다.
데이터 페이지의 경우 테이터 이외의 개행문자등이 더 추가되서는 안됩니다.
댓글 없음:
댓글 쓰기