http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=51148
http://www.dynamicdrive.com/dynamicindex16/chainedselects/index.htm
------ select123.htm -----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script id="dynamic" LANGUAGE="JavaScript"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
function select_dynamic(prefix,sn,index){
//var dynamic=document.getElementById('dynamic');
var sel=eval("document.fm1."+prefix+'_'+sn);
var sel_val;
var src;
var i;
if(index!=0) // 0이 아니면, 초기설정을 위한 호출이므로 index로 변경함
sel.selectedIndex= index;
// 0이면, onChage이벤트이므로 현재 selectedinde를 그대로 유지하고
//현재 select 하위 select가 출력되어 있다면 필요 없으므로 제거해놓는다
for(i=sn+1;i<10; i++){
if (document.getElementById(prefix+i)) // 존재한다면
document.getElementById(prefix+i).innerHTML="";
}
sel_val= sel.options[sel.selectedIndex].value;
src = "select123.php?prefix="+prefix+"&sn="+sn+"&val="+sel_val;
if (src){
dynamic.src = src;
}else{
// select 단계를 종료했으므로 (더 찾을 분류가 없으므로)
// 그냥 무시하고 FORM의 submit 할 때 뭔가 적절한 조치를 하겠거니
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<!--
<select name="select_1"> select의 name은 prefix+'_'+sn 로 구성되고
<span id="select2"></span> 처럼
select 테그들이 innerHTML로 들어갈 위치의 id는 '_'가 없이 prefix+sn 로 구성된다.
왜 이렇게 했느냐 하면 name과 id가 같으면 충돌할까봐....
-->
<form name="fm1" method=post action='select123_submit.php'>
<select name="select_1" omChange="select_dynamic('select',1,0);">
<option value=''>-선택-</option>
<option value='서울'>서울</option>
<option value='부산'>부산</option>
<option value='중국'>중국</option>
</select>
<span id="select2"></span>
<span id="select3"></span>
<span id="select4"></span>
<INPUT TYPE="submit">
</form>
</BODY>
</HTML>
<!-- 이 방법으로 동적 생성되는 select를 초기화 하려면,
- ① 현재 select의 선택값을 설정도 해야 하지만
- ② 그에 따른 서브 select 테그들을 새로 구성한다. (=앞이 선택되어야 뒤가 뭔지 결정되니까)
- 그리고는 그 다음의 selelct의 설정을 위해 ①②를 또 반복해야 한다.
- 그러므로 다음처럼 select 순서대로 호출하면 테그도 만들어지고 셋팅도 된다.
-->
<script>select_dynamic('select',1,2);</script>
<script>select_dynamic('select',2,1);</script>
<script>select_dynamic('select',3,2);</script>
------ select123.php -----------
<?
# 이것이 호출되는 형식 = "select123.php?prefix="+prefix+"&sn="+sn+"&val="+sel_val;
$sel_prefix=$_GET['prefix'];
$sel_sn= $_GET['sn']+1;
$sel_val= $_GET['val'];
$sel_id= $prefix. $sel_sn;
$sel_name= $prefix. '_'.$sel_sn;
if (strlen($sel_val)<1) return "alert('해당없음');";
## DB 쿼리 등의 처리로 하위 select 테그들을 구성한다.
$arr= get_array($sel_val);
if (!is_array($arr)){ # 하위 자료가 없으면 <select>테그 대신에 0을 리턴함
echo '0';
return ;
}
$tags="<select name='$sel_name' omChange='select_dynamic(\\\"$sel_prefix\\\",$sel_sn,0);'>";
$tags.="<option value=''>-선택-</option>";
for($i=0;$i<sizeof($arr);$i++){
$arr_val= $arr[$i];
$tags.="<option value='$sel_val,$arr_val'>$arr_val</option>";
}
$tags.='</select>';
echo "document.getElementById('$sel_id').innerHTML=\"$tags\";";
## 실제는 DB 쿼리 등으로 배열을 구하겠지만 여기서는 간단히 준비된 배열로 테스트
function get_array($sel_val)
{
$data= array(
'서울'=>array('종로구','영등포구','일원구'),
'부산'=>array('남구','진구'),
'중국'=>array('상해','북경'),
'서울,종로구'=>array('김씨','이씨','노씨'),
'서울,영등포구'=>array('박군','이군'),
'서울,일원구'=>array('김양','왕여사'),
'부산,남구'=>array('쌔리때리','치아뿌라'),
'부산,진구'=>array('니벤또','마이무따'),
'중국,상해'=>array('란자완스','탕슈'),
'중국,북경'=>array('짜장면','짬뽕')
);
return $data[$sel_val];
}
------------ select123_submit.php -----------------
<?
print_r($_POST);
?>
'홈페이지 제작 > JavaScript' 카테고리의 다른 글
| 자주 사용하는 이벤트 정리 (0) | 2008.02.16 |
|---|---|
| 엔터, 공백 제거 (0) | 2007.12.21 |
| 모니터 중앙에 새창 띄우기, 새창을 모니터 중앙으로 이동하기 (0) | 2007.05.04 |
| 확대 이미지 레이어형식(DIV)으로 보여주기 (0) | 2007.03.13 |
| input, select 박스 disable 시키기 (0) | 2007.03.12 |
