페이지를 만들다 보면 검색 조건에 카테고리를 선택해야 하는 경우가 생깁니다.
이러한 카테고리가 1depth 구조로 되어 있다면 DB에서 전체를 가져와 보여주면 됩니다.
하지만 일반적으로 1depth(메인) 밑에 2depth(서브) 가 있어서 메인 선택에 따라 서브 카테고리가 변경되야 합니다.
메인에 스포츠를 선택하면 서브에 야구, 농구, 축구 가 보여야 하고 공연을 선택한다면 서브에 연극, 뮤지컬, 오페라, 콘서트 등이 보여야 하는 구조입니다.
아래와 같이 말이죠.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | <!DOCTYPE html><html lang="ko"> <head> <Title>Category</Title> <Meta Http-Equiv="Content-Type" Content="text/html; charset=utf-8"> </head> 1depth: <select name="mainCategory" style="width:200px"> <option value="">전체</option> </select> 2depth: <select name="subCategory" style="width:200px"> <option value="">전체</option> </select> <script type="text/javascript"> $(document).ready(function() { //Main 카테고리를 선택 할때 마다 AJAX를 호출할 수 있지만 DB접속을 매번 해야 하기 때문에 main, sub카테고리 전체을 들고온다. //****************이부분은 DB로 셋팅하세요. //Main 카테고리 셋팅 (DB에서 값을 가져와 셋팅 하세요.) var mainCategoryArray = new Array(); var mainCategoryObject = new Object(); mainCategoryObject = new Object(); mainCategoryObject.main_category_id = "1"; mainCategoryObject.main_category_name = "스포츠"; mainCategoryArray.push(mainCategoryObject); mainCategoryObject = new Object(); mainCategoryObject.main_category_id = "2"; mainCategoryObject.main_category_name = "공연"; mainCategoryArray.push(mainCategoryObject); //Sub 카테고리 셋팅 (DB에서 값을 가져와 셋팅 하세요.) var subCategoryArray = new Array(); var subCategoryObject = new Object(); //스포츠에 해당하는 sub category 리스트 subCategoryObject = new Object(); subCategoryObject.main_category_id = "1"; subCategoryObject.sub_category_id = "1" subCategoryObject.sub_category_name = "야구" subCategoryArray.push(subCategoryObject); subCategoryObject = new Object(); subCategoryObject.main_category_id = "1"; subCategoryObject.sub_category_id = "2" subCategoryObject.sub_category_name = "농구" subCategoryArray.push(subCategoryObject); subCategoryObject = new Object(); subCategoryObject.main_category_id = "1"; subCategoryObject.sub_category_id = "3" subCategoryObject.sub_category_name = "축구" subCategoryArray.push(subCategoryObject); //공연에 해당하는 sub category 리스트 subCategoryObject = new Object(); subCategoryObject.main_category_id = "2"; subCategoryObject.sub_category_id = "1" subCategoryObject.sub_category_name = "연극" subCategoryArray.push(subCategoryObject); subCategoryObject = new Object(); subCategoryObject.main_category_id = "2"; subCategoryObject.sub_category_id = "2" subCategoryObject.sub_category_name = "뮤지컬" subCategoryArray.push(subCategoryObject); subCategoryObject = new Object(); subCategoryObject.main_category_id = "2"; subCategoryObject.sub_category_id = "3" subCategoryObject.sub_category_name = "오페라" subCategoryArray.push(subCategoryObject); subCategoryObject = new Object(); subCategoryObject.main_category_id = "2"; subCategoryObject.sub_category_id = "4" subCategoryObject.sub_category_name = "콘서트" subCategoryArray.push(subCategoryObject); //****************이부분은 DB로 셋팅하세요. //메인 카테고리 셋팅 var mainCategorySelectBox = $("select[name='mainCategory']"); for(var i=0;i<mainCategoryArray.length;i++){ mainCategorySelectBox.append("<option value='"+mainCategoryArray[i].main_category_id+"'>"+mainCategoryArray[i].main_category_name+"</option>"); } //*********** 1depth카테고리 선택 후 2depth 생성 START *********** $(document).on("change","select[name='mainCategory']",function(){ //두번째 셀렉트 박스를 삭제 시킨다. var subCategorySelectBox = $("select[name='subCategory']"); subCategorySelectBox.children().remove(); //기존 리스트 삭제 //선택한 첫번째 박스의 값을 가져와 일치하는 값을 두번째 셀렉트 박스에 넣는다. $("option:selected", this).each(function(){ var selectValue = $(this).val(); //main category 에서 선택한 값 subCategorySelectBox.append("<option value=''>전체</option>"); for(var i=0;i<subCategoryArray.length;i++){ if(selectValue == subCategoryArray[i].main_category_id){ subCategorySelectBox.append("<option value='"+subCategoryArray[i].sub_category_id+"'>"+subCategoryArray[i].sub_category_name+"</option>"); } } }); }); //*********** 1depth카테고리 선택 후 2depth 생성 END *********** });</script> |
