jQuery와 Javascript 를 이용한 부모 자식 select box 만들기

부모 콤보 박스 선택 시 자식 콤보박스 값 변경하기

 

개발을 하다 보면 부모 select box 선택 시 자식 select box 안의 내용이 바뀌는 기능이 필요한 경우가 

 

종종 있는 것 같습니다.

 

검색 조건이나 입력할 때 주로 많이 사용해서 공통을 개발하시는 개발자분이 이미 만들어 놓은 경우가 

 

많은데 없을 경우를 대비해서 참고용으로 정리해 보았습니다.

 

/**
     * 메인 콤보박스 선택에 따른 서브 콤보박스 변경
     * @param argFormNm : form name
     * @param argObj : 적용할 select box name
     * @param argValue : 메인 콤보 값
     * @param argUrl : 조회할 url
     * @param argSrhInputSec : 검색 조건 or 입력 항목 구분 ( '' or input )
     * @param argSelVal : selected 할 option 값
*/
    fncDynamicSecondComboBox : function(argFormNm, argObj, argValue, argUrl, argSrhInputSec, argSelVal){
        var url = argUrl;
        var varFormNm = $('#'+argFormNm);
        var varSecCdChk = varFormNm.find('#srhSecCd').val();

        if(typeof varSecCdChk === 'undefined'){
            varFormNm.append('<input type="hidden" id="srhSecCd" name="srhSecCd"/>');
        }
        varFormNm.find('#srhSecCd').val(argValue);

        $.ajax({
            type:'POST',
            url:url,
            dataType:'json',
            data:varFormNm.serialize(),
            success:function(retData){
                var varOption = '';
                var varSelected = '';
                var varFormNm = $('#'+argFormNm);

                if(String(argSrhInputSec) === 'input'){
                    varOption = '<option value="">선택하세요.</option>';
                } else if(String(argSrhInputSec) === 'search'){
                    varOption = '<option value="">전체</option>';
                }

                varFormNm.find('#'+argObj).empty();
                if(retData.retList !== undefined && retData.retList.length > 0){
                    var varRetList = retData.retList;
                    for(var i=0; i < varRetList.length; i++){
                        var varCode = String(varRetList[i].code);
                        if(varCode === String(argSelVal)){
                            varSelected = 'selected';
                        } else {
                            varSelected = '';
                        }
                        varOption += '<option value="'+varRetList[i].code+'" '+varSelected+'>'+varRetList[i].text+'</option>';
                    }
                }
                varFormNm.find('#'+argObj).html(varOption);
                varFormNm.find('#'+argObj).selectmenu("refresh");   // jquery UI selectmenu 일 경우 refresh 필요
            }
        });
    }