<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<title>Multi Select JS</title>
<!-- Include the Multi Select stylesheet -->
<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>
<!-- Include the Multi Select JS class -->
<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>
