[활용팁] 자바스크립트 배열을 활용한 3단 메뉴 구현 예제(서브 속성값 확인 방법포함)

 

메뉴 구성은 3단 메뉴에 같은 선택박스가 3개 구현 예제입니다.

 

일단 동영상 보시면 알겠지만, 배열을 활용한 3단 메뉴 구현 예제 소스입니다.

 

 

대, 중, 소 로 분리한 메뉴 데이터

var Menu_Data = new Array(
	['메뉴1','메뉴21','메뉴131','표시명131'],
	['메뉴1','메뉴21','메뉴132','표시명132'],
	['메뉴1','메뉴22','메뉴231','표시명231'],
	['메뉴1','메뉴22','메뉴232','표시명232'],
	['메뉴1','메뉴22','메뉴233','표시명233'],
	['메뉴1','메뉴22','메뉴234','표시명234'],
	['메뉴1','메뉴23','메뉴331','표시명331'],
	['메뉴1','메뉴23','메뉴332','표시명332'],
	['메뉴1','메뉴23','메뉴333','표시명333'],
	['메뉴2','메뉴2-21','메뉴2-131','표시명2-131'],
	['메뉴2','메뉴2-21','메뉴2-132','표시명2-132'],
	['메뉴2','메뉴2-22','메뉴2-231','표시명2-231'],
	['메뉴2','메뉴2-22','메뉴2-232','표시명2-232'],
	['메뉴2','메뉴2-22','메뉴2-233','표시명2-233']
);		// 메뉴 구성 배열

메뉴 데이터도 배열변수에 넣어서 활요하고 선택박스도 같은이름으로 배열을 만들어 활용하면 쉽게 처리 할 수 있다.

function Menu_Display() 
{
	var p1 = "", p2 = "", p3 = "", old_cd1 = "", old_cd2 = "", m3 = "";
	var f = document.MForm;
	var o1, o2, o3;
	
	for (var arr = 0; arr < 3; arr++) {
		o1 = f.menu_0[arr];		// 1차 메뉴용
		o2 = f.menu_1[arr];		// 2차 메뉴용
		o3 = f.menu_2[arr];		// 3차 메뉴용
		o1.length = 0;
		o2.length = 0;
		o3.length = 0;
		m3  = "";
		old_cd1 = "";
		for (var x = 0; x < Menu_Data.length; x++) {
			
			if (p1 == "")	{
				p1 = Menu_Data[x][0];
				p2 = Menu_Data[x][1];
				p3 = Menu_Data[x][2];
			}

			if (old_cd1 != Menu_Data[x][0]) {
				dTxt = Menu_Data[x][0];
				dVal = Menu_Data[x][0];
				o1.add(new Option(dTxt, dVal));			// 옵션값 추가
				old_cd1 = Menu_Data[x][0];
			}
			if (old_cd1 == p1 && old_cd2 != Menu_Data[x][1]) {
				dTxt = Menu_Data[x][1];
				dVal = Menu_Data[x][1];
				o2.add(new Option(dTxt, dVal));			// 옵션값 추가
				old_cd2 = Menu_Data[x][1];
			}
			if (old_cd1 == p1 && old_cd2 == p2) {
				dTxt = Menu_Data[x][3];
				dVal = Menu_Data[x][2];
				m3 += "<option value='" + dVal + "' cd_name='" + dTxt + "'>" + dTxt + "</option>";
			}
		}

		$("select[id='menu_2']:eq(" + arr + ")").html(m3);

		MenuSelect(arr);

	}
}

선택박스의 서브 속성 값도 확인 하는 방법도 같이 확인 가능하다.

function MenuSelect(arr) 
{
	var pname=$("select[id='menu_2']:eq(" + arr + ") option:selected").attr('cd_name');		// 선택한 서브 속성 값 확인용

	$("td[id='disp_select_value']:eq(" + arr + ")").html(pname);
}

 

 

 

 

 

예제소스 다운로드

 

https://blog.naver.com/spprince/222434374328

 

#활용팁 #javascript #자바스크립트 #jQuery #배열 #3단메뉴

 

---

 

본 블로그의 글은 공공정보와 개인적 생각의 글 임을 알려드립니다.

또한 오류가 있는 부분이 있으면 댓글로 알려주시기 바랍니다.

 

감사합니다.