Back to Snippets

Multi Select Dropdown JS

Customizable Multi Select Dropdown built with HTML and JS, featuring search, select-all, and dynamic options without dependencies.

#multi select

#dropdown

#select

#js

#html

#css

/HTML *CSS ()JS Output Live Updates

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1">
		<title>Multi Select JS</title>
        
        <link href="https://codeshack.io/web/demos/MultiSelect.css" rel="stylesheet" type="text/css">
        <style>
        * {
            box-sizing: border-box;
            font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            font-size: 16px;
        }
        body {
            margin: 0;
            padding: 15px;
            background-color: #f3f4f7;
        }
        form {
            display: flex;
            flex-direction: column;
            margin: 100px auto;
            padding: 40px 40px 60px;
            max-width: 500px;
            width: 100%;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        form h1 {
            margin: 10px 0 5px;
            font-size: 24px;
            font-weight: 500;
            color: #474b50;
        }
        form label {
            margin: 25px 0 10px;
            font-weight: 500;
            color: #474b50;
        }
        </style>
	</head>
	<body>
        <form>

<h1>Multi Select Dropdown</h1>

<label for="fruits">Fruits</label>
            <select id="fruits" name="fruits" data-placeholder="Select fruits" multiple data-multi-select>
                <option value="Apple">Apple</option>
                <option value="Banana">Banana</option>
                <option value="Blackberry">Blackberry</option>
                <option value="Blueberry">Blueberry</option>
                <option value="Cherry">Cherry</option>
                <option value="Cranberry">Cranberry</option>
                <option value="Grapes">Grapes</option>
                <option value="Kiwi">Kiwi</option>
                <option value="Mango">Mango</option>
                <option value="Orange">Orange</option>
                <option value="Peach">Peach</option>
                <option value="Pear">Pear</option>
                <option value="Pineapple">Pineapple</option>
                <option value="Raspberry">Raspberry</option>
                <option value="Strawberry">Strawberry</option>
                <option value="Watermelon">Watermelon</option>
            </select>

<label for="cars">Car Manufacturers</label>
            <select id="cars" name="cars" data-placeholder="Select car manufacturers" data-max="2" data-search="false" data-select-all="false" data-width="300px" data-height="50px" multiple data-multi-select>
                <option value="Audi">Audi</option>
                <option value="BMW">BMW</option>
                <option value="Chevrolet">Chevrolet</option>
            </select>

<label for="dynamic">Dynamic Select</label>
            <select id="dynamic" name="dynamic"></select>

</form>

<script src="https://codeshack.io/web/demos/MultiSelect.js"></script>
        <script>
        // Initialize the Multi Selects
        const dynamicSelect = new MultiSelect('#dynamic', {
            data: [
                {
                    value: 'opt1',
                    text: 'Option 1'
                },
                {
                    value: 'opt2',
                    html: '<strong>Option 2 with HTML!</strong>'
                },
                {
                    value: 'opt3',
                    text: 'Option 3',
                    selected: true
                },
                {
                    value: 'opt4',
                    text: 'Option 4'
                },
                {
                    value: 'opt5',
                    text: 'Option 5'
                }
            ],
            placeholder: 'Select an option',
            search: true,
            selectAll: false,
            listAll: false,
            max: 2,
            min: 1,
            onChange: function(value, text, element) {
                console.log('Change:', value, text, element);
                // console.log(dynamicSelect.selectedItems);
            },
            onSelect: function(value, text, element) {
                console.log('Selected:', value, text, element);
            },
            onUnselect: function(value, text, element) {
                console.log('Unselected:', value, text, element);
            }
        });
        </script>

</body>
</html>