multiselect.js 데이터 처리

 

어드민 템플릿이나 백오피스 구현 시 용이한 js 플러그인이다.

 

LINK

http://loudev.com - jquery multiselect

LINK

깃허브 https://github.com/lou/multi-select

예제 테스트

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../css/multi-select.css">
<form id="frm" method="GET">
    <h1>Pre-selected-options</h1>
    <select id="brand" name="brand" multiple="multiple">
        <option value="1" selected>1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4" selected>4</option>
        <option value="100">100</option>
    </select>
    <button type="submit">ok</button>
</form>
<?
var_dump($_REQUEST['brands']);
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="../js/jquery.multi-select.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#brand').multiSelect();
})
</script>

 

<select> 엘리먼트 네임을 배열 형태로 지정하고 서버에서도 배열로 받아 처리하면 된다.

위 페이지를 확인해 보면 아래와 같다(ok 버튼 클릭 시).

 

 

JAVASCRIPT로 데이터 처리

배열로 넘기지 않고, javascript 로 처리하려면 아래 참고.

(프론트엔드, 퍼블리싱 과정에서 이 방법을 선택해야 할 수도 있음)

 

미리 선택된 값(1, 4)을 배열에 담는다.

var arr = [];

$('#brand option:selected').each(function() {

    arr.push( $(this).val() );

});

 

ok 버튼을 클릭했을 때 값을 넘긴다.

$('#frm').on('submit', function () {

    $(this).append('<input type="hidden" name="brands" value="' + arr + '">');

})

 

값을 선택하거나 해제하는 경우, 배열에도 동일하게 처리한다.

메소드는 afterSelect, afterDeselect 이다.

$('#brand').multiSelect({

    afterSelect: function(values){
        arr.push( values );
    },
    afterDeselect: function(values){
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].toString() == values) {
                arr.splice(i, 1);
                i--;
            }
        }
    }

});

 

완성된 코드.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../css/multi-select.css">
<form id="frm" method="GET" style="margin-left: 50px;">
    <h1>Pre-selected-options</h1>
    <select id="brand" multiple="multiple">
        <option value="1" selected>1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4" selected>4</option>
        <option value="100">100</option>
    </select>
    <button type="submit">ok</button>
</form>
<?
echo $_REQUEST['brands'];
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="../js/jquery.multi-select.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    var arr = [];

    $('#brand option:selected').each(function() {

        arr.push( $(this).val() );
        
    });

    $('#brand').multiSelect({

        afterSelect: function(values){
            arr.push( values );
        },
        afterDeselect: function(values){
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].toString() == values) {
                    arr.splice(i, 1);
                    i--;
                }
            }
        }

    });

    $('#frm').on('submit', function () {

        $(this).append('<input type="hidden" name="brands" value="' + arr + '">');

    })

})
</script>