CSS & Javascript implementation for multiselect html control
Description
this multiselect html control allows the user to click on the dropdown and select multiple items out of this list. there is also a control that allows selection of all the items in the list or to deselect them.
usually this is achieved using a more complicated control or asking the user to hold down control to select items in the list, and usually with a dropdown you can only select one item and then the control closes with this select option you can just check the boxes on the items you would like to select and it will trigger an event, which you can see in the console when checking and unchecking the items.
How to use this script
1. Include the script and css in your header or footer.
HTML
<link href="https://cssbundle.com/bundle/css-amp-javascript-implementation-for-multiselect-html-control/css/multiselect.css" rel="stylesheet"/>
<script src="https://cssbundle.com/bundle/css-amp-javascript-implementation-for-multiselect-html-control/js/multiselect.min.js"></script>
2. Add the select box html
the enable and disable are optional
3. Add the following javascript
Javascript
document.multiselect('#testSelect1')
.setCheckBoxClick("checkboxAll", function(target, args) {
console.log("Checkbox 'Select All' was clicked and got value ", args.checked);
})
.setCheckBoxClick("1", function(target, args) {
console.log("Checkbox for item with value '1' was clicked and got value ", args.checked);
});
function enable() {
document.multiselect('#testSelect1').setIsEnabled(true);
}
function disable() {
document.multiselect('#testSelect1').setIsEnabled(false);
}
CSS & Javascript implementation for multiselect html control Demo
View Demo Full Screen View Demo New Tab
CSS & Javascript implementation for multiselect html control Code
HTML
<div class='wrap'>
<select id='testSelect1' multiple>
<option value='1'>Item 1</option>
<option value='2' selected>Item 2</option>
<option value='3' selected>Item 3</option>
<option value='4'>Item 4</option>
<option value='5'>Item 5</option>
</select>
<div>
<button onclick="enable()">Enable</button>
<button onclick="disable()">Disable</button>
</div>
</div>
CSS
.wrap {
margin:0 auto;
width:500px;
margin-top:40px;
}
.multiselect-wrapper {
width: 180px;
display: inline-block;
white-space: nowrap;
font-size: 12px;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}
.multiselect-wrapper .multiselect-input {
width: 100%;
padding-right: 50px;
}
.multiselect-wrapper label {
display: block;
font-size: 12px;
font-weight: 600;
}
.multiselect-wrapper .multiselect-list {
z-index: 1;
position: absolute;
display: none;
background-color: white;
border: 1px solid grey;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
margin-top: -2px;
}
.multiselect-wrapper .multiselect-list.active {
display: block;
}
.multiselect-wrapper .multiselect-list>span {
font-weight: bold;
}
.multiselect-wrapper .multiselect-list .multiselect-checkbox {
margin-right: 2px;
}
.multiselect-wrapper .multiselect-list>span,
.multiselect-wrapper .multiselect-list li {
cursor: default;
}
.multiselect-wrapper .multiselect-list {
padding: 5px;
min-width: 200px;
}
.multiselect-wrapper ul {
list-style: none;
display: block;
position: relative;
padding: 0px;
margin: 0px;
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
.multiselect-wrapper ul li {
padding-right: 20px;
display: block;
}
.multiselect-wrapper ul li.active {
background-color: rgb(0, 102, 255);
color: white;
}
.multiselect-wrapper ul li:hover {
background-color: rgb(0, 102, 255);
color: white;
}
.multiselect-input-div {
height: 34px;
}
.multiselect-input-div input {
border: 1px solid #ababab;
background: #fff;
margin: 5px 0 6px 0;
padding: 5px;
vertical-align: middle;
}
.multiselect-count {
position: relative;
text-align: center;
border-radius: 2px;
background-color: lightblue;
display: inline-block !important;
padding: 2px 7px;
left: -45px;
}
.multiselect-wrapper.disabled .multiselect-dropdown-arrow {
border-top: 5px solid lightgray;
}
.multiselect-wrapper.disabled .multiselect-count {
background-color: lightgray;
}
.multiselect-dropdown-arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
position: absolute;
line-height: 20px;
text-align: center;
display: inline-block !important;
margin-top: 17px;
margin-left: -42px;
}
.multiselect-wrapper label {
display: block;
font-size: 14px;
font-weight: 600;
color: #424242;
}
.multiselect-wrapper ul li.active {
background-color: rgb(130 222 156);
color: white;
}
Scripts
<link href="https://cssbundle.com/bundle/css-amp-javascript-implementation-for-multiselect-html-control/css/multiselect.css" rel="stylesheet"/>
<script src="https://cssbundle.com/bundle/css-amp-javascript-implementation-for-multiselect-html-control/js/multiselect.min.js"></script>
Javascript
document.multiselect('#testSelect1')
.setCheckBoxClick("checkboxAll", function(target, args) {
console.log("Checkbox 'Select All' was clicked and got value ", args.checked);
})
.setCheckBoxClick("1", function(target, args) {
console.log("Checkbox for item with value '1' was clicked and got value ", args.checked);
});
function enable() {
document.multiselect('#testSelect1').setIsEnabled(true);
}
function disable() {
document.multiselect('#testSelect1').setIsEnabled(false);
}
External Link for CSS & Javascript implementation for multiselect html control