동적 셀렉트 메뉴의 결과 값을 어떻게 구현하나요?
본문
아래의 소스에서 4단 선택 후
사칙연산의 계산식의 결과 값은 어떻게 구현 하나요?
=========================================
동적 셀렉트 메뉴입니다.
서핑하다 한놈 업어왔습니다.
동작으로는 나무랄때없는데 4단셀렉트박스 자료모두 배열에 담아야합니다.
급하게 메뉴가 필요해서 서버에 부하가 좀 가지만 디비연동 동적메뉴로 바꿔습니다
아래 답글에 조금 수정된것 있습니다. 더 좋은 방법이 있으신분 자료 공유해주시면 감사......
<HTML>
<HEAD>
<TITLE> menu 동적 할당 </TITLE>
<script>
function getCataAllId(cmd){
cmd = eval(cmd);
cmd2 = cmd +1;
initCataID(cmd);
var ch = "";
for(var idx = 1; idx < cmd2; idx++){
ch = ch + eval("document.f1.menu"+idx+".value") + "|"+idx+"|";
}
var v = 0;
var temp = "";
var tempv = "";
var arg = "";
for(var m = 0; m < menuArr.length; m ++) {
arg = menuArr[m].substring(menuArr[m].indexOf("|"+cmd+"|")+3,menuArr[m].indexOf("|"+cmd2+"|")) ;
temp = menuArr[m].substring(0, menuArr[m].indexOf("|"+cmd+"|")+3);
if(temp == ch && tempv != arg ){
v++;
eval("document.f1.menu"+cmd2+".length = document.f1.menu"+cmd2+".length + 1");
eval("document.f1.menu"+cmd2+".options["+v+"].value = arg ");
eval("document.f1.menu"+cmd2+".options["+v+"].text = arg ");
}
if(temp != ch){
tempv = "";
}else{
tempv = menuArr[m].substring(menuArr[m].indexOf("|"+cmd+"|")+3,menuArr[m].indexOf("|"+cmd2+"|"));
}
}
}
function initCataID(cmd){
cmd = eval(cmd);
if(cmd == 1){
document.f1.menu2.length = 1;
document.f1.menu3.length = 1;
document.f1.menu4.length = 1;
document.f1.menu2.selectedIndex = 0;
document.f1.menu3.selectedIndex = 0;
document.f1.menu4.selectedIndex = 0;
}
if(cmd == 2){
document.f1.menu3.length = 1;
document.f1.menu4.length = 1;
document.f1.menu3.selectedIndex = 0;
document.f1.menu4.selectedIndex = 0;
}
if(cmd == 3){
document.f1.menu4.length = 1;
document.f1.menu4.selectedIndex = 0;
}
}
</script>
</HEAD>
<BODY>
<form name = 'f1' >
<select name = 'menu1' onchange='javascript:getCataAllId(1)'>
<option value="" selected>선택하세요.</option>
</select>
<select name = 'menu2' onchange='javascript:getCataAllId(2)'>
<option value="" selected>선택하세요.</option>
</select>
<select name = 'menu3' onchange='javascript:getCataAllId(3)'>
<option value="" selected>선택하세요.</option>
</select>
<select name = 'menu4' >
<option value="" selected>선택하세요.</option>
</select>
</form>
<p></p>
<font size = 2>
var menuArr => DB에서 가져오든 하드코딩 하든 위 구분자와 ; 구분자를 적절히 사용하여 만들어 놓는다.>
</font>
<script>
var menuArr = "디카|1|니콘|2|300만|3|쿨픽스3200|4|/디카|1|니콘|2|300만|3|쿨픽스5200|4|/디카|1|니콘|2|500만|3|쿨픽스3200|4|/디카|1|니콘|2|700만|3|쿨픽스3200|4|/디카|1|캐논|2|300만|3|파워샷A75|4|/디카|1|캐논|2|500만|3|파워샷A75|4|/핸디캠|1|소형|2|소니|3|DCR-HC|4|/핸디캠|1|소형|2|소니|3|DCR-IP|4|/TV|1|삼성|2|평면|3|30인치|4|/TV|1|삼성|2|평면|3|40인치|4|/PC|1|노트북|2|컴팩|3|P4|4|/PC|1|노트북|2|도시바|3|P4|4|".split("/");
var z = 0;
var temp = 0;
initCataID(1);
for(var m = 0; m < menuArr.length; m ++) {
if ( menuArr[m].substring(0, menuArr[m].indexOf("|1|")) != temp ){
document.f1.menu1.length = document.f1.menu1.length + 1;
document.f1.menu1.options[z+1].value = menuArr[m].substring(0, menuArr[m].indexOf("|1|")) ;
document.f1.menu1.options[z+1].text = menuArr[m].substring(0, menuArr[m].indexOf("|1|")) ;
temp = menuArr[m].substring(0, menuArr[m].indexOf("|1|"));
z++;
}
}
</script>
</BODY>
</HTML>
