4단 콤보 select 폼 만들기 정보
4단 콤보 select 폼 만들기
관련링크
본문
다중(멀티/multi) 선택(select) 만들기
4단 콤보 select 만들기
자바스크립트를 활용한 4단 콤보 선택하기입니다.
디비와 연동된 콤보 자료 가지고 계신분 어디 없으신가요?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table>
<tr>
<td style='padding-left:9px; height:30px;'>· 진료과 <span class="required">(필수)</span></td>
<td>
<select name="wr_9" id="combo_0" onChange="change(this)" style="width:100px; color:#5184CD; " class=write_input_select >
<option value="">진료과선택</option>
<option value='선택1'>선택1</option>
<option value='선택2'>선택2</option>
<option value='선택3'>선택3</option>
</select>
<select name="wr_10" id="combo_1" onChange="change(this)" style="width:150px; color:#5184CD;" class=write_input_select >
</select>
<select name="wr_8" id="combo_2" onChange="change(this);" style="width:90px; color:#5184CD; " class=write_input_select >
</select>
<select name="wr_3" id="combo_3" onChange="change(this);" style="width:255px; color:#5184CD; " class=write_input_select >
</select>
</td>
</tr>
<script language="Javascript" type="text/javascript">
<!--
// first combo box
/*
data_1 = new Option("선택1", "선택1");
data_2 = new Option("선택2", "선택2");
data_3 = new Option("선택3", "선택3");
*/
// second combo box
// 선택1_옵션
data_1_1 = new Option("선택1_옵션1", "선택1_옵션1");
data_1_2 = new Option("선택1_옵션2", "선택1_옵션2");
// 선택2_옵션
data_2_1 = new Option("선택2_옵션1", "선택2_옵션1");
data_2_2 = new Option("선택2_옵션2", "선택2_옵션2");
// 선택3_옵션
data_3_1 = new Option("선택3_옵션1", "선택3_옵션1");
data_3_2 = new Option("선택3_옵션2", "선택3_옵션2");
// third combo box
// 선택1_옵션1_옵션
data_1_1_1 = new Option("선택1_옵션1_옵션1", "선택1_옵션1_옵션1");
data_1_1_2 = new Option("선택1_옵션1_옵션2", "선택1_옵션1_옵션2");
// 선택1_옵션2_옵션
data_1_2_1 = new Option("선택1_옵션2_옵션1", "선택1_옵션2_옵션1");
data_1_2_2 = new Option("선택1_옵션2_옵션2", "선택1_옵션2_옵션2");
// 선택2_옵션1_옵션
data_2_1_1 = new Option("선택2_옵션1_옵션1", "선택2_옵션1_옵션1");
data_2_1_2 = new Option("선택2_옵션1_옵션2", "선택2_옵션1_옵션2");
// 선택2_옵션2_옵션
data_2_2_1 = new Option("선택2_옵션2_옵션1", "선택2_옵션2_옵션1");
data_2_2_2 = new Option("선택2_옵션2_옵션2", "선택2_옵션2_옵션2");
// 선택3_옵션1_옵션
data_3_1_1 = new Option("선택3_옵션1_옵션1", "선택3_옵션1_옵션1");
data_3_1_2 = new Option("선택3_옵션1_옵션2", "선택3_옵션1_옵션2");
// 선택3_옵션2_옵션
data_3_2_1 = new Option("선택3_옵션2_옵션1", "선택3_옵션2_옵션1");
data_3_2_2 = new Option("선택3_옵션2_옵션2", "선택3_옵션2_옵션2");
// fourth combo box
// 선택1_옵션1_옵션1_옵션
data_1_1_1_1 = new Option("선택1_옵션1_옵션1_옵션1", "선택1_옵션1_옵션1_옵션1");
data_1_1_1_2 = new Option("선택1_옵션1_옵션1_옵션2", "선택1_옵션1_옵션1_옵션2");
// 선택1_옵션1_옵션2_옵션
data_1_1_2_1 = new Option("선택1_옵션1_옵션2_옵션1", "선택1_옵션1_옵션2_옵션1");
data_1_1_2_2 = new Option("선택1_옵션1_옵션2_옵션2", "선택1_옵션1_옵션2_옵션2");
// other parameters
displaywhenempty="-선택없음-"
valuewhenempty=""
displaywhennotempty="- 항목선택↓ -"
valuewhennotempty=""
function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];
i=parseInt(currentbox)+1
// I empty all combo boxes following the current one
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
son = document.getElementById("combo_"+i);
// I empty all options except the first one (it isn't allowed)
for (m=son.options.length-1;m>0;m--) son.options[m]=null;
// I reset the first option
son.options[0]=new Option(displaywhenempty,valuewhenempty)
i=i+1
}
// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill
stringa='data'
i=0
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
if (i==currentbox) break;
i=i+1
}
// filling the "son" combo (if exists)
following=parseInt(currentbox)+1
if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
(document.getElementById("combo_"+following)!=null)) {
son = document.getElementById("combo_"+following);
stringa=stringa+"_"
i=0
while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
// if there are no options, I empty the first option of the "son" combo
// otherwise I put "-select-" in it
if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
if (eval("typeof("+stringa+"1)=='undefined'"))
eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
else
eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
else
eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
i=i+1
}
//son.focus()
i=1
combostatus=''
cstatus=stringa.split("_")
while (cstatus[i]!=null) {
combostatus=combostatus+cstatus[i]
i=i+1
}
return combostatus;
}
}
//-->
</script>
</table>
</body>
</html>
참고자료
http://www.technote.co.kr/php/technote1/board.php?board=apple&command=body&no=493
http://www.happyjung.com/bbs/board.php?bo_table=lecture&wr_id=1358
4단 콤보 select 만들기
자바스크립트를 활용한 4단 콤보 선택하기입니다.
디비와 연동된 콤보 자료 가지고 계신분 어디 없으신가요?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table>
<tr>
<td style='padding-left:9px; height:30px;'>· 진료과 <span class="required">(필수)</span></td>
<td>
<select name="wr_9" id="combo_0" onChange="change(this)" style="width:100px; color:#5184CD; " class=write_input_select >
<option value="">진료과선택</option>
<option value='선택1'>선택1</option>
<option value='선택2'>선택2</option>
<option value='선택3'>선택3</option>
</select>
<select name="wr_10" id="combo_1" onChange="change(this)" style="width:150px; color:#5184CD;" class=write_input_select >
</select>
<select name="wr_8" id="combo_2" onChange="change(this);" style="width:90px; color:#5184CD; " class=write_input_select >
</select>
<select name="wr_3" id="combo_3" onChange="change(this);" style="width:255px; color:#5184CD; " class=write_input_select >
</select>
</td>
</tr>
<script language="Javascript" type="text/javascript">
<!--
// first combo box
/*
data_1 = new Option("선택1", "선택1");
data_2 = new Option("선택2", "선택2");
data_3 = new Option("선택3", "선택3");
*/
// second combo box
// 선택1_옵션
data_1_1 = new Option("선택1_옵션1", "선택1_옵션1");
data_1_2 = new Option("선택1_옵션2", "선택1_옵션2");
// 선택2_옵션
data_2_1 = new Option("선택2_옵션1", "선택2_옵션1");
data_2_2 = new Option("선택2_옵션2", "선택2_옵션2");
// 선택3_옵션
data_3_1 = new Option("선택3_옵션1", "선택3_옵션1");
data_3_2 = new Option("선택3_옵션2", "선택3_옵션2");
// third combo box
// 선택1_옵션1_옵션
data_1_1_1 = new Option("선택1_옵션1_옵션1", "선택1_옵션1_옵션1");
data_1_1_2 = new Option("선택1_옵션1_옵션2", "선택1_옵션1_옵션2");
// 선택1_옵션2_옵션
data_1_2_1 = new Option("선택1_옵션2_옵션1", "선택1_옵션2_옵션1");
data_1_2_2 = new Option("선택1_옵션2_옵션2", "선택1_옵션2_옵션2");
// 선택2_옵션1_옵션
data_2_1_1 = new Option("선택2_옵션1_옵션1", "선택2_옵션1_옵션1");
data_2_1_2 = new Option("선택2_옵션1_옵션2", "선택2_옵션1_옵션2");
// 선택2_옵션2_옵션
data_2_2_1 = new Option("선택2_옵션2_옵션1", "선택2_옵션2_옵션1");
data_2_2_2 = new Option("선택2_옵션2_옵션2", "선택2_옵션2_옵션2");
// 선택3_옵션1_옵션
data_3_1_1 = new Option("선택3_옵션1_옵션1", "선택3_옵션1_옵션1");
data_3_1_2 = new Option("선택3_옵션1_옵션2", "선택3_옵션1_옵션2");
// 선택3_옵션2_옵션
data_3_2_1 = new Option("선택3_옵션2_옵션1", "선택3_옵션2_옵션1");
data_3_2_2 = new Option("선택3_옵션2_옵션2", "선택3_옵션2_옵션2");
// fourth combo box
// 선택1_옵션1_옵션1_옵션
data_1_1_1_1 = new Option("선택1_옵션1_옵션1_옵션1", "선택1_옵션1_옵션1_옵션1");
data_1_1_1_2 = new Option("선택1_옵션1_옵션1_옵션2", "선택1_옵션1_옵션1_옵션2");
// 선택1_옵션1_옵션2_옵션
data_1_1_2_1 = new Option("선택1_옵션1_옵션2_옵션1", "선택1_옵션1_옵션2_옵션1");
data_1_1_2_2 = new Option("선택1_옵션1_옵션2_옵션2", "선택1_옵션1_옵션2_옵션2");
// other parameters
displaywhenempty="-선택없음-"
valuewhenempty=""
displaywhennotempty="- 항목선택↓ -"
valuewhennotempty=""
function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];
i=parseInt(currentbox)+1
// I empty all combo boxes following the current one
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
son = document.getElementById("combo_"+i);
// I empty all options except the first one (it isn't allowed)
for (m=son.options.length-1;m>0;m--) son.options[m]=null;
// I reset the first option
son.options[0]=new Option(displaywhenempty,valuewhenempty)
i=i+1
}
// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill
stringa='data'
i=0
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
if (i==currentbox) break;
i=i+1
}
// filling the "son" combo (if exists)
following=parseInt(currentbox)+1
if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
(document.getElementById("combo_"+following)!=null)) {
son = document.getElementById("combo_"+following);
stringa=stringa+"_"
i=0
while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
// if there are no options, I empty the first option of the "son" combo
// otherwise I put "-select-" in it
if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
if (eval("typeof("+stringa+"1)=='undefined'"))
eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
else
eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
else
eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
i=i+1
}
//son.focus()
i=1
combostatus=''
cstatus=stringa.split("_")
while (cstatus[i]!=null) {
combostatus=combostatus+cstatus[i]
i=i+1
}
return combostatus;
}
}
//-->
</script>
</table>
</body>
</html>
참고자료
http://www.technote.co.kr/php/technote1/board.php?board=apple&command=body&no=493
http://www.happyjung.com/bbs/board.php?bo_table=lecture&wr_id=1358
추천
4
4
댓글 9개
감사합니다
감사합니다. ^^
활용에 도움이 될것 같습니다.
2단콤보는 해봤는데... 3단또는 4단 콤보가 필요해서 정리한 자료입니다.
도움되시면 좋겠네요...
도움되시면 좋겠네요...
감사합니다!..
좋은 정보 감사합니다~
정보 감사합니다
뭔 책을 사서 공부하면 이런 걸 짤 수 있나요? 정말 대단하세용 !! ^^
4단 콤보가 뭔가요??
