쇼핑몰 만드는 중 상품 카테고리 javascript

Question

카테고리 테이블을 따로 만들지 않고 상품 코드를 javascript로 대분류 중분류 나눠서 코드를 입력시키려고 하는데

대분류를 누르면 중분류가 떠야 하는데 뜨질 않네요ㅜㅜ 다른 방법이나 해결할 방법이 있을까요ㅠ 필요하다면 코드 올려드릴게요

Answer 1

인녕하세요.

보통 화면에서의 이벤트나 컨트롤은 자바스크립트로 해야 합니다. 잘 안된다면 코딩이 잘못된 것으로 보입니다.

전체 소스를 올려주셔야 전문가분들이 보고 오류를 잡아 줄 수 있을 것 같습니다.

대분류를 onchange할때 호출되는 함수를 확인하고 시행되는 순서대로 천천히 잘 살펴보셔야 합니다.

Answer 2

안녕하세요

샘플 소스 입니다

Demo : https://jsfiddle.net/hduvzjp2/3/

- HTML

<div> 대분류 <select id="sel1"> </select> </div> <div> 중분류 <select id="sel2"> </select> </div>

- Javascript

let topMenu = [ {menuId: 'A', name: '메뉴1'}, {menuId: 'B', name: '메뉴2'}, {menuId: 'C', name: '메뉴3'}, ]; let subMenu = {'A': [ {menuId: 'A1', name: '메뉴1-1'}, {menuId: 'A2', name: '메뉴1-2'}, {menuId: 'A3', name: '메뉴1-3'} ], 'B': [ {menuId: 'B1', name: '메뉴2-1'}, {menuId: 'B2', name: '메뉴2-2'} ], 'C': [ {menuId: 'C1', name: '메뉴3-1'}, {menuId: 'C2', name: '메뉴3-2'}, {menuId: 'C3', name: '메뉴3-3'}, {menuId: 'C4', name: '메뉴3-4'} ] }; let options = ''; for (let item of topMenu) { options += '<option value="' + item.menuId + '">' + item.name + '</option>'; } let sel1 = document.getElementById('sel1'); let sel2 = document.getElementById('sel2'); sel1.innerHTML = options; sel1.addEventListener('change', function() { let sub = subMenu[this.value]; if (!sub) { return; } options = ''; for (let item of sub) { options += '<option value="' + item.menuId + '">' + item.name + '</option>'; } sel2.innerHTML = options; }); var customEvent = document.createEvent('Event'); customEvent.initEvent('change', false, true); sel1.dispatchEvent(customEvent);