애매한 잡학사전

메인 콤보박스 선택에 따른 서브 콤보박스 변경 본문

DEV/자바스크립트

메인 콤보박스 선택에 따른 서브 콤보박스 변경

거대한 개발자 2017. 8. 29. 10:16
반응형

검색 조건이나 입력 form 에 메인 콤보박스의 선택에 따라서 서브 콤보박스가 변경되는 경우가 있는데 


이럴 경우 서브 콤보박스를 변경할 수 있는 함수를 구현하였습니다.


    /**

     * 메인 콤보박스 선택에 따른 서브 콤보박스 변경

     * @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 필요

            }

        });

    }

Comments