여분필드로 2차카테고리 셀렉트 만들기 채택완료

</strong></p>

<p>    <select name="mainCategory" style="width:200px">

        <option value="">선택해주세요</option>

    </select>

    <select name="subCategory" style="width:200px">

        <option value="">선택해주세요</option>

    </select></p>

<p><script type="text/javascript"></p>

<p>$(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);</p>

<p>

    

    //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);</p>

<p>    subCategoryObject = new Object();

    

    //코미디언에 해당하는 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);

    

    //****************이부분은 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></p>

<p><strong>