묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
카테고리 4단 onchange 셀렉트 초기화문제
2006.06.09 07:23
구조는 1단계 셀렉트값 선택시 2단계옵션리스트가 올라오고
2단계 선택시 3단계옵션리스트가 올라오고
3단계 선택시 3단계옵션리스트가 올라오는 방식입니다.
질문:
1단계 셀렉트값 누를경우 2단계가 나오는데 3단계를 초기화 할수 있는 방법이 없나요?
맨 처음누를때는 순차적으로 잘 작동되는데
4단계까지선택하고 다시 1단계를 누르면 3단계, 4단계 셀렉트값은 이전값 그대로 가지고 있습니다.
즉 1단계 누를때 3, 4단계값 초기화
2단계 누를때 4단계값 초기화 할수 있는 방법을 묻는겁니다.
이 소스는 FirstListItem 이라는 단어를 구글에서 찿아 보면 많이 나오는 소스 입니다.
물론 이소스의 DB 연동은 되어 있지 않고 , 제 개인소스는 되어 있죠.
좋은 하루 되세요.
<script lanuage=javascript>
var FirstList = new Array(2);;
var SecondList = new Array(4);;
var ThirdList = new Array(12);;
var ForthList = new Array(26);;
var nvalue;
var description;
function FirstListItem(nvalue, description) {
this.nvalue = nvalue;
this.description = description;
}
function SecondListItem(category,nvalue,description) {
this.category = category;
this.nvalue = nvalue;
this.description = description;
}
function ThirdListItem(category,nvalue,description) {
this.category = category;
this.nvalue = nvalue;
this.description = description;
}
function ThirdListItem(category,category1,nvalue,description) {
this.category = category;
this.category1 = category1;
this.nvalue = nvalue;
this.description = description;
}
function ForthListItem(category,category1,category2,nvalue,description) {
this.category = category;
this.category1 = category1;
this.category2 = category2;
this.nvalue = nvalue;
this.description = description;
}
function prepareData(){
FirstList[0] = new FirstListItem(0,"매입");
FirstList[1] = new FirstListItem(1,"매출");
SecondList[0] = new SecondListItem(0,0,"일반매입");
SecondList[1] = new SecondListItem(0,1,"고정자산매입");
SecondList[2] = new SecondListItem(1,0,"신고기간분");
SecondList[3] = new SecondListItem(1,1,"예정누락분");
SecondList[4] = new SecondListItem(1,2,"예정누락분2");
ThirdList[0] = new ThirdListItem(0,0,0,"공제세액");
ThirdList[1] = new ThirdListItem(0,0,1,"불공제세액");
ThirdList[2] = new ThirdListItem(0,0,2,"계산서");
ThirdList[3] = new ThirdListItem(0,0,3,"누락분공제");
ThirdList[3] = new ThirdListItem(0,0,4,"누락분공제");
ThirdList[4] = new ThirdListItem(0,1,0,"공제세액");
ThirdList[5] = new ThirdListItem(0,1,1,"불공정세액");
ThirdList[6] = new ThirdListItem(0,1,2,"계산서");
ThirdList[7] = new ThirdListItem(0,1,3,"누락분공제");
ThirdList[8] = new ThirdListItem(1,0,0,"세금계산서");
ThirdList[9] = new ThirdListItem(1,0,1,"기타분");
ThirdList[10] = new ThirdListItem(1,1,0,"세금계산서");
ThirdList[11] = new ThirdListItem(1,1,1,"기타분");
ThirdList[12] = new ThirdListItem(1,1,2,"기타분2");
ForthList[0] = new ForthListItem(0,0,0,0,"세금계산서");
ForthList[1] = new ForthListItem(0,0,1,0,"비영업용소형승용차");
ForthList[2] = new ForthListItem(0,0,1,1,"접대관련매입세액");
ForthList[3] = new ForthListItem(0,0,1,2,"필요적기재사항누락");
ForthList[4] = new ForthListItem(0,0,1,3,"영수증");
ForthList[5] = new ForthListItem(0,0,2,0,"해당없음");
ForthList[6] = new ForthListItem(0,0,3,0,"세금계산서");
ForthList[7] = new ForthListItem(0,1,0,0,"세금계산서");
ForthList[8] = new ForthListItem(0,1,1,0,"비영업용소형승용차");
ForthList[9] = new ForthListItem(0,1,1,1,"접대관련매입세액");
ForthList[10] = new ForthListItem(0,1,1,2,"필요적기재사항누락");
ForthList[11] = new ForthListItem(0,1,1,3,"영수증");
ForthList[12] = new ForthListItem(0,1,2,0,"해당없음");
ForthList[13] = new ForthListItem(0,1,3,0,"세금계산서");
ForthList[14] = new ForthListItem(1,0,0,0,"세금계산서");
ForthList[15] = new ForthListItem(1,0,0,1,"고정자산매각");
ForthList[16] = new ForthListItem(1,0,1,0,"영수증");
ForthList[17] = new ForthListItem(1,0,1,1,"금전등록기");
ForthList[18] = new ForthListItem(1,0,1,2,"카드판매");
ForthList[19] = new ForthListItem(1,0,1,3,"고정자산매각");
ForthList[20] = new ForthListItem(1,1,0,0,"세금계산서");
ForthList[21] = new ForthListItem(1,1,0,1,"고정자산매각");
ForthList[22] = new ForthListItem(1,1,1,0,"영수증");
ForthList[23] = new ForthListItem(1,1,1,1,"금전등록기");
ForthList[24] = new ForthListItem(1,1,1,2,"카드판매");
ForthList[25] = new ForthListItem(1,1,1,3,"고정자산매각");
}
function reFillList(){
var selValue;
var nOption;
selValue = admin.slipcls.value;
admin.gubun1.length = 0;
// admin.gubun2.length = 0;
// admin.gubun3.length = 0;
for(var i=0; i<SecondList.length;i++){
if(SecondList[i].category == selValue) {
nOption = admin.gubun1.length;
if( selValue == ""){
nvalue = "";
}else{
admin.gubun1.options[nOption] = new Option(SecondList[i].description,SecondList[i].nvalue);
}
}
}
//alert("testing gubun1 : " + admin.gubun1.options[0].value);
//options[0].selected=true 이면 첫번째거 무조건 선택
//c2는 앞에서 받아온 값
/*
if(c2 != ""){//수정할때 필요한 값, 2번째 값을 뿌려준다.
admin.gubun1.options[c2].selected=true;
}else{
admin.gubun1.options[0].selected=true;
}
*/
}
function reFillList1() {
var selValue;
var nOption;
var selValue1;
var nOption1;
selValue = admin.slipcls.value;
selValue1 = admin.gubun1.value;
// admin.gubun1.length = 0;
admin.gubun2.length = 0;
// admin.gubun3.length = 0;
for(var i=0; i<ThirdList.length;i++){
if( ThirdList[i].category1 == selValue1 && ThirdList[i].category==selValue) {
nOption1 = admin.gubun2.length;
if( selValue == ""){
nvalue = "";
}else{
admin.gubun2.options[nOption1] = new Option(ThirdList[i].description,ThirdList[i].nvalue);
}
}
}
/*
if(c2 != ""){ //수정할때 필요한 값, 3번째 값을 뿌려준다.
admin.gubun2.options[c2].selected=true;
}else{
admin.gubun2.options[0].selected=true;
}
*/
}
function reFillList2(){
var selValue;
var selValue1;
var selValue2;
var nOption;
var nOption1;
var nOption2;
selValue = admin.slipcls.value;
selValue1 = admin.gubun1.value;
selValue2 = admin.gubun2.value;
// admin.gubun1.length = 0;
// admin.gubun2.length = 0;
admin.gubun3.length = 0;
for(var i=0; i<ForthList.length;i++){
if(ForthList[i].category2 == selValue2 && ForthList[i].category1==selValue1 && ForthList[i].category==selValue) {
nOption2 = admin.gubun3.length;
if( selValue == ""){
nvalue = "";
}else{
admin.gubun3.options[nOption2] = new Option(ForthList[i].description,ForthList[i].nvalue);
}
}
}
// admin.gubun3.options[0].selected=true;
}
//---------------------------------------------------------------------------
var trNormal = "";
function revcheck(theform)
{
for( var i=0; i< document.admin.elements.length; i++) {
var ele = document.admin.elements[i];
if(ele.name == 'check')
ele.checked = !ele.checked;
}
return;
}
function allcheck(theform)
{
for( var i=0; i< document.admin.elements.length; i++) {
var ele = document.admin.elements[i];
if ( -1 != ele.name.search(/check/) )
ele.checked = true;
}
return;
}
function discheck(theform)
{
for( var i=0; i<document.admin.elements.length; i++) {
var ele = document.admin.elements[i];
found = ele.name.match(/check*/);
if( found != null )
ele.checked = false;
}
return;
}
</script>
<body>
<form name="admin">
<tr>
<td>
1
<script language=javascript>
var page="";
var i;
prepareData();
page += "<select name='slipcls' size='10' onChange='reFillList();'>";
for ( i=0; i<FirstList.length;i++) {
page +="<option value='" + FirstList[i].nvalue + "'";
if (i==0) {
page += " selected";
}
page += ">"+FirstList[i].description;
}
page+="</select>";
document.write(page);
</script>
2
<select name='gubun1' size="10" onChange='reFillList1()'>
<option value="" selected>---------------------</option>
<SCRIPT LANGUAGE=javascript>
reFillList();
</script>
</select>
3
<select name='gubun2' size="10" onChange='reFillList2()'>
<option value="" selected>---------------------</option>
<SCRIPT LANGUAGE=javascript>
reFillList1();
</script>
</select>
4
<select name='gubun3' size="10" >
<SCRIPT LANGUAGE=javascript>
reFillList2();
</script>
</select></td></tr>
</form>
</body>
</html>
2단계 선택시 3단계옵션리스트가 올라오고
3단계 선택시 3단계옵션리스트가 올라오는 방식입니다.
질문:
1단계 셀렉트값 누를경우 2단계가 나오는데 3단계를 초기화 할수 있는 방법이 없나요?
맨 처음누를때는 순차적으로 잘 작동되는데
4단계까지선택하고 다시 1단계를 누르면 3단계, 4단계 셀렉트값은 이전값 그대로 가지고 있습니다.
즉 1단계 누를때 3, 4단계값 초기화
2단계 누를때 4단계값 초기화 할수 있는 방법을 묻는겁니다.
이 소스는 FirstListItem 이라는 단어를 구글에서 찿아 보면 많이 나오는 소스 입니다.
물론 이소스의 DB 연동은 되어 있지 않고 , 제 개인소스는 되어 있죠.
좋은 하루 되세요.
<script lanuage=javascript>
var FirstList = new Array(2);;
var SecondList = new Array(4);;
var ThirdList = new Array(12);;
var ForthList = new Array(26);;
var nvalue;
var description;
function FirstListItem(nvalue, description) {
this.nvalue = nvalue;
this.description = description;
}
function SecondListItem(category,nvalue,description) {
this.category = category;
this.nvalue = nvalue;
this.description = description;
}
function ThirdListItem(category,nvalue,description) {
this.category = category;
this.nvalue = nvalue;
this.description = description;
}
function ThirdListItem(category,category1,nvalue,description) {
this.category = category;
this.category1 = category1;
this.nvalue = nvalue;
this.description = description;
}
function ForthListItem(category,category1,category2,nvalue,description) {
this.category = category;
this.category1 = category1;
this.category2 = category2;
this.nvalue = nvalue;
this.description = description;
}
function prepareData(){
FirstList[0] = new FirstListItem(0,"매입");
FirstList[1] = new FirstListItem(1,"매출");
SecondList[0] = new SecondListItem(0,0,"일반매입");
SecondList[1] = new SecondListItem(0,1,"고정자산매입");
SecondList[2] = new SecondListItem(1,0,"신고기간분");
SecondList[3] = new SecondListItem(1,1,"예정누락분");
SecondList[4] = new SecondListItem(1,2,"예정누락분2");
ThirdList[0] = new ThirdListItem(0,0,0,"공제세액");
ThirdList[1] = new ThirdListItem(0,0,1,"불공제세액");
ThirdList[2] = new ThirdListItem(0,0,2,"계산서");
ThirdList[3] = new ThirdListItem(0,0,3,"누락분공제");
ThirdList[3] = new ThirdListItem(0,0,4,"누락분공제");
ThirdList[4] = new ThirdListItem(0,1,0,"공제세액");
ThirdList[5] = new ThirdListItem(0,1,1,"불공정세액");
ThirdList[6] = new ThirdListItem(0,1,2,"계산서");
ThirdList[7] = new ThirdListItem(0,1,3,"누락분공제");
ThirdList[8] = new ThirdListItem(1,0,0,"세금계산서");
ThirdList[9] = new ThirdListItem(1,0,1,"기타분");
ThirdList[10] = new ThirdListItem(1,1,0,"세금계산서");
ThirdList[11] = new ThirdListItem(1,1,1,"기타분");
ThirdList[12] = new ThirdListItem(1,1,2,"기타분2");
ForthList[0] = new ForthListItem(0,0,0,0,"세금계산서");
ForthList[1] = new ForthListItem(0,0,1,0,"비영업용소형승용차");
ForthList[2] = new ForthListItem(0,0,1,1,"접대관련매입세액");
ForthList[3] = new ForthListItem(0,0,1,2,"필요적기재사항누락");
ForthList[4] = new ForthListItem(0,0,1,3,"영수증");
ForthList[5] = new ForthListItem(0,0,2,0,"해당없음");
ForthList[6] = new ForthListItem(0,0,3,0,"세금계산서");
ForthList[7] = new ForthListItem(0,1,0,0,"세금계산서");
ForthList[8] = new ForthListItem(0,1,1,0,"비영업용소형승용차");
ForthList[9] = new ForthListItem(0,1,1,1,"접대관련매입세액");
ForthList[10] = new ForthListItem(0,1,1,2,"필요적기재사항누락");
ForthList[11] = new ForthListItem(0,1,1,3,"영수증");
ForthList[12] = new ForthListItem(0,1,2,0,"해당없음");
ForthList[13] = new ForthListItem(0,1,3,0,"세금계산서");
ForthList[14] = new ForthListItem(1,0,0,0,"세금계산서");
ForthList[15] = new ForthListItem(1,0,0,1,"고정자산매각");
ForthList[16] = new ForthListItem(1,0,1,0,"영수증");
ForthList[17] = new ForthListItem(1,0,1,1,"금전등록기");
ForthList[18] = new ForthListItem(1,0,1,2,"카드판매");
ForthList[19] = new ForthListItem(1,0,1,3,"고정자산매각");
ForthList[20] = new ForthListItem(1,1,0,0,"세금계산서");
ForthList[21] = new ForthListItem(1,1,0,1,"고정자산매각");
ForthList[22] = new ForthListItem(1,1,1,0,"영수증");
ForthList[23] = new ForthListItem(1,1,1,1,"금전등록기");
ForthList[24] = new ForthListItem(1,1,1,2,"카드판매");
ForthList[25] = new ForthListItem(1,1,1,3,"고정자산매각");
}
function reFillList(){
var selValue;
var nOption;
selValue = admin.slipcls.value;
admin.gubun1.length = 0;
// admin.gubun2.length = 0;
// admin.gubun3.length = 0;
for(var i=0; i<SecondList.length;i++){
if(SecondList[i].category == selValue) {
nOption = admin.gubun1.length;
if( selValue == ""){
nvalue = "";
}else{
admin.gubun1.options[nOption] = new Option(SecondList[i].description,SecondList[i].nvalue);
}
}
}
//alert("testing gubun1 : " + admin.gubun1.options[0].value);
//options[0].selected=true 이면 첫번째거 무조건 선택
//c2는 앞에서 받아온 값
/*
if(c2 != ""){//수정할때 필요한 값, 2번째 값을 뿌려준다.
admin.gubun1.options[c2].selected=true;
}else{
admin.gubun1.options[0].selected=true;
}
*/
}
function reFillList1() {
var selValue;
var nOption;
var selValue1;
var nOption1;
selValue = admin.slipcls.value;
selValue1 = admin.gubun1.value;
// admin.gubun1.length = 0;
admin.gubun2.length = 0;
// admin.gubun3.length = 0;
for(var i=0; i<ThirdList.length;i++){
if( ThirdList[i].category1 == selValue1 && ThirdList[i].category==selValue) {
nOption1 = admin.gubun2.length;
if( selValue == ""){
nvalue = "";
}else{
admin.gubun2.options[nOption1] = new Option(ThirdList[i].description,ThirdList[i].nvalue);
}
}
}
/*
if(c2 != ""){ //수정할때 필요한 값, 3번째 값을 뿌려준다.
admin.gubun2.options[c2].selected=true;
}else{
admin.gubun2.options[0].selected=true;
}
*/
}
function reFillList2(){
var selValue;
var selValue1;
var selValue2;
var nOption;
var nOption1;
var nOption2;
selValue = admin.slipcls.value;
selValue1 = admin.gubun1.value;
selValue2 = admin.gubun2.value;
// admin.gubun1.length = 0;
// admin.gubun2.length = 0;
admin.gubun3.length = 0;
for(var i=0; i<ForthList.length;i++){
if(ForthList[i].category2 == selValue2 && ForthList[i].category1==selValue1 && ForthList[i].category==selValue) {
nOption2 = admin.gubun3.length;
if( selValue == ""){
nvalue = "";
}else{
admin.gubun3.options[nOption2] = new Option(ForthList[i].description,ForthList[i].nvalue);
}
}
}
// admin.gubun3.options[0].selected=true;
}
//---------------------------------------------------------------------------
var trNormal = "";
function revcheck(theform)
{
for( var i=0; i< document.admin.elements.length; i++) {
var ele = document.admin.elements[i];
if(ele.name == 'check')
ele.checked = !ele.checked;
}
return;
}
function allcheck(theform)
{
for( var i=0; i< document.admin.elements.length; i++) {
var ele = document.admin.elements[i];
if ( -1 != ele.name.search(/check/) )
ele.checked = true;
}
return;
}
function discheck(theform)
{
for( var i=0; i<document.admin.elements.length; i++) {
var ele = document.admin.elements[i];
found = ele.name.match(/check*/);
if( found != null )
ele.checked = false;
}
return;
}
</script>
<body>
<form name="admin">
<tr>
<td>
1
<script language=javascript>
var page="";
var i;
prepareData();
page += "<select name='slipcls' size='10' onChange='reFillList();'>";
for ( i=0; i<FirstList.length;i++) {
page +="<option value='" + FirstList[i].nvalue + "'";
if (i==0) {
page += " selected";
}
page += ">"+FirstList[i].description;
}
page+="</select>";
document.write(page);
</script>
2
<select name='gubun1' size="10" onChange='reFillList1()'>
<option value="" selected>---------------------</option>
<SCRIPT LANGUAGE=javascript>
reFillList();
</script>
</select>
3
<select name='gubun2' size="10" onChange='reFillList2()'>
<option value="" selected>---------------------</option>
<SCRIPT LANGUAGE=javascript>
reFillList1();
</script>
</select>
4
<select name='gubun3' size="10" >
<SCRIPT LANGUAGE=javascript>
reFillList2();
</script>
</select></td></tr>
</form>
</body>
</html>