동적 셀렉트 메뉴입니다.

해바리

· 8년 전 · 조회 4879 4879 · 댓글 3 3

동적 셀렉트 메뉴입니다.
서핑하다 한놈 업어왔습니다.
동작으로는 나무랄때없는데 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>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 3개

해바리

프로필 보기 이 회원 글보기

8년 전

디비연동 입니다.
<?php
include_once('./_common.php');
$sql = " select * from 테이블 ";
$res = sql_query($sql);
for ($i=0; $row = sql_fetch_array($res); $i++) {
$nm[$i] = $row['필드1'].'|1|'.$row['필드2'].'|2|'.$row['필드3'].'|3|'.$row['필드4'].'|4|';
}
?>

<HTML>
<HEAD>
<TITLE> menu 동적 할당 </TITLE>
<style>
.select1 {height:20px;width:80px;}
.select2 {height:20px;width:120px;}
.select3 {height:20px;width:150px;}
.select4 {height:20px;width:200px;}
</style>
<script type="text/javascript">
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' id='menu1' OnChange='javascript:getCataAllId(1)' class="select1">
<option value="" selected>선택하세요.</option>
</select>
<select name = 'menu2' id='menu2' OnChange='javascript:getCataAllId(2)' class="select2">
<option value="" selected>선택하세요.</option>
</select>
<select name = 'menu3' id='menu3' OnChange='javascript:getCataAllId(3)' class="select3">
<option value="" selected>선택하세요.</option>
</select>
<select name = 'menu4' id='menu4' OnChange='javascript:gotomenu()' class="select4">
<option value="" selected>선택하세요.</option>
</select>
</form>
<p></p>
<font size = 2>

</font>

<script type="text/javascript">
/* JSON encode, parse */
var stuff = <?php echo json_encode($nm); ?>;
var str = JSON.stringify(stuff);
var menuArr = new Array();
menuArr= JSON.parse(str);
var z1 = 0;
var temp1 = 0;
initCataID(1);
for(var m = 0; m < menuArr.length; m ++) {
if ( menuArr[m].substring(0, menuArr[m].indexOf("|1|")) != temp1 ){
document.f1.menu1.length = document.f1.menu1.length + 1;
document.f1.menu1.options[z1+1].value = menuArr[m].substring(0, menuArr[m].indexOf("|1|")) ;
document.f1.menu1.options[z1+1].text = menuArr[m].substring(0, menuArr[m].indexOf("|1|")) ;
temp1 = menuArr[m].substring(0, menuArr[m].indexOf("|1|"));
z1++;
}
/* index 1에 중복 제거입니다. */
}

function gotomenu()
{
location.href = '#';
}
</script>

</BODY>
</HTML>

펄스나인

프로필 보기 이 회원 글보기

5년 전

오랜시간이 지났지만 감사의 말씀 올립니다...(_ _)
이틀 고민하던걸 한번에 해결해주셨네요.

타이포

프로필 보기 이 회원 글보기

7년 전

좋은 팁 감사합니다~!

게시글 목록

번호	제목	글쓴이	조회	날짜
1071	[관리팁] 관리자 주문목록에서 배송비 확인하기 1	쥐치포	3,922	7년 전
1061	모바일, PC 전환 아이콘 퀵메뉴 만들기 3	쥐치포	4,878	7년 전
1056	IIS 에서 로고 및 확장자 없는 이미지 안나올 때 2	윤느	4,735	7년 전
1046	그누보드가 설치된 사이트에 영카트 추가 설치하기(영카트 5.3.3.3.1) 13	fm25	9,036	7년 전
1007	1:1 채팅 기능 연동하기 (옆 담벼락에서 펌) 2	ByungjungKim	5,545	7년 전
1006	메인 롤링배너 추가 6	onlymilk47	6,601	7년 전
1003	일반 복사시 페이지 접근 방법 1	ilruo	2,734	8년 전
993	LG유플러스 현금영수증 발행 소스 오타 수정 5	카무이	5,173	8년 전
983	[길가에떨어진돌맹이팁] 영카트5 상품목록에서 가격대별 검색하기 5	지운아빠	3,775	8년 전
982	이미지 트래픽을 줄여봅시다. 6	명랑폐인	5,051	8년 전
966	그누보드(영카트)용 메일건 mailgun 발송 소스 입니다. 6	명랑폐인	4,300	8년 전
943	NPay 로고 ai 10	지운아빠	10,760	8년 전
932	[미세먼지팁] 배너이미지 갱신 문제 해결 (자동버전화) 6	지운아빠	4,834	8년 전
921	택배사 URL 3	인텔리전트웹	3,850	8년 전
908	제품 마우스 오버시 두번째 이미지 보여주기 10	onlymilk47	4,690	8년 전
903	모바일 쇼핑몰 리스트 ajax 로딩으로 리스트 불러올때 (www/shop/ajax.list.php) 2	soulfood	4,657	8년 전
902	영카트 상품 금액 제어 2	수다왕	4,231	8년 전
901	그누보드를 사용할지 영카트를 사용하지 코드로 제어 3	수다왕	3,354	8년 전
898	상품 판매 가격 로그인해야 볼 수 있게 하기 회원제 쇼핑몰 5	작은별	4,619	8년 전
893	(간단팁) 관리자 상품목록에서 판매갯수 확인하기 3	쥐치포	4,938	8년 전
883	제품별 배송비 내용 출력 7	onlymilk74	5,489	8년 전
880	고객님의 주문 정보를 처리하는 중 오류가 발생해서 주문이 완료되지 않았습니다. (2017-07-03 수정) 4	해피정	5,055	8년 전
874	주문완료 페이지 만들기 14	웹프리죤	6,982	8년 전
870	상품검색시 기본설명도 검색하기 1	윈디눈하	4,159	8년 전
867	커뮤니티와 영카트를 동시에 검색 4	열린이글	5,030	8년 전
862	장바구니/관심상품/주문배송 카운트 표시 4	웹프리죤	4,941	8년 전
861	영카트4를 이전할때 상품 이미지가 안넘어올 경우 2	해피정	3,722	8년 전
860	회원가격(Lv.2) / 특별가격(Lv.3) / VIP가격(Lv.4 이상) (2022-02-07 14:30 수정) 18	해피정	5,532	8년 전
857	상품 정보 고시 삭제하기 1	작은별	5,109	8년 전
854	(간단팁) 주문서 엑셀출력 운송장번호 그대로 나오게 수정 2	쥐치포	7,378	8년 전

이전 다음

6 7 8 9 10

전체 목록

영카트5