Study/JavaScript

[JS]멀티선택 | 다중선택 Multi Select Box

Rajin 2021. 12. 10. 17:49
728x90

멀티선택에 대해 작업을 하다가 꽤나 괜찮은 소스를 발견하여 간단히 정리해보려한다.

Jquery Multi Select Box 플러그인이라 하는데 아래 링크로 접속해서 세팅을 먼저해야한다.

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

 

Jquery.sumoselect by Hemant Negi

jquery.sumoselect jquery.sumoselect.js - A cross device Single/Multi Select jQuery Select plugin. LIVE DEMO HERE Sumoselect full : jquery.sumoselect.js Minified : jquery.sumoselect.min.js A jQuery plugin that progressively enhances an HTML Select Box into

hemantnegi.github.io

Import Source

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- css -->
    <link rel="stylesheet" type="text/css" href="../../../js/HemantNegi-jquery.sumoselect-ae0557d/sumoselect.min.css"/>

    <!-- js -->
    <script src="../../../js/jquery-1.11.1.min.js"></script>
    <script src="../../../js/HemantNegi-jquery.sumoselect-ae0557d/jquery.sumoselect.min.js"></script>
</head>
<body>
</body>
</html>

jquery 소스를 다운받아서 css와 jquery를 import해준다.

<body></body>안에 Select Box를 작업해준다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- css -->
    <link rel="stylesheet" type="text/css" href="../../../js/HemantNegi-jquery.sumoselect-ae0557d/sumoselect.min.css"/>

    <!-- js -->
    <script src="../../../js/jquery-1.11.1.min.js"></script>
    <script src="../../../js/HemantNegi-jquery.sumoselect-ae0557d/jquery.sumoselect.min.js"></script>
</head>
<body>
    <select id="sumoSelectId" name="sumoSelectName" multiple="multiple" class="sumoselect_multiple">
        <option value="">선택</option>
        <option value="">첫 번째</option>
        <option value="">두 번째</option>
        <option value="">세 번째</option>
        <option value="">네 번째</option>
        <option value="">다섯 번째</option>
    </select>

    <script>
        $('.sumoselect_multiple').SumoSelect({
	        placeholder: '선택해주세요'
        });
    </script>
</body>
</html>