[javascript] jQuery.sumoselect

html select multi selected기능이 필요할 때 간단하게 사용할 수 있는 플러그인을 찾아 프로젝트에서 사용하여 드롭다운 메뉴를 개선한 경험을 작성하려고 합니다.

 

사용 방법

jQuery와 sumoselect 플러그인 포함

<link href="/styles/sumoselect.min.css" rel="stylesheet">
<script src="/scripts/jquery-3.6.0.min.js"></script>
<script src="/scripts/jquery.sumoselect.min.js"></script>

 

HTML 구조

<select id="target" multiple="multiple" class="sumoselect_multiple">
    //some options
</select>

<script>
//init 
$('#slots').SumoSelect({
    selectAll: true
})
</script>

추가 옵션

$('#target')[0].sumo.selectAll(); //전체 선택
$('#target')[0].sumo.unSelectAll() //전체 선택 해제
$('#target')[0].sumo.selectItem(numberText + ''); //value에 맞는 option selected ex) '1','2'
$('#target')[0].sumo.selectItem(number); //index에 맞는 option selected

const selectTargetCount = $('.SumoSelect').attr('selected-count'); //선택된 option갯수

 

참고 : https://hemantnegi.github.io/jquery.sumoselect/