[jQuery] select multiple value 받기

<select> 태그의 multiple 속성이 있는 상황에서 .serialize() 메서드를 사용해 Controller로 직렬화된 데이터를 받는 상황에서 유용한 메서드입니다.

 

사용법

<form>
    <input type="text" value="" name="text1" />
    <input type="text" value="" name="text2" />
    <input type="checkbox" name="checkbox1" />
    <input type="checkbox" name="checkbox2" />
    <input type="checkbox" name="checkbox3" />
    <select name="select1" multiple>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
	</select>
    <select name="select2" multiple>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
	</select>
    <button type="button" id="submit">제출</button>
</form>

<script>
        $(document).ready(function () {
            $('#submit').on('click', function () {
                let FormData = GetFormData();

                $.post('@Url.Action("Submit")', FormData, function (data) {
                    console.log(data);
                })
            })
        })

    function GetFormData($form) {
        var t_Array = $('form').serializeArray();
        var rtnVal_Array = {
            select1: "",
            select2: ""
        };

        $.each(t_Array, function (index, item) {
            if (item.name == 'select1' || item.name == 'select2') {
                rtnVal_Array[item.name] += item.value + ",";
            } else {
                rtnVal_Array[item.name] = item.value;
            }
        });

        rtnVal_Array.select1 = rtnVal_Array.select1.substring(0, rtnVal_Array.select1.length - 1);
        rtnVal_Array.select2 = rtnVal_Array.select2.substring(0, rtnVal_Array.select2.length - 1);

        return rtnVal_Array;
    }
</script>

 

참고

• .serialize() | jQuery API Documentation
• [Javascript] - [jQuery] form .serialize(), 표준 URL 인코딩 표기법으로 텍스트 문자열을 생성