Develop Reference

How to select checkboxes from the dropdown? [duplicate]

var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.gradesub-filter{
width: 299px;
height: 335px;
margin: 30px 0px 0px 0px;
background-color: #ffffff;
}
.form-filter-shade{
padding: 16px 0px 9px 20px;
font-weight: 600;
font-size: 16px;
border-bottom: 2px solid #F0F0F0;
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<div class="gradesub-filter">
<div class="form-filter-shade">Gradecheck</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</div>
I am trying to do "Drop-down with multi select" with checkboxes as shown in the picture below. Now the issue with the code is unable to select the list from the dropdown.
I am thinking that the issue is in js code, where it is not fetching values during onclick, Can any one please suggest me to solve the issue

I think you are looking for nested Checkbox, Provided Image also suggest the same.
Here is the code snippet, simply added <ul> and <li> tags for checkboxes alignment and used some JavaScript query selectors for checkbox functioning.
var subOptions = document.querySelectorAll('input.sub');
var checkAll = document.getElementById("one");
for(var i = 0; i < subOptions.length; i++ ){
subOptions[i].onclick = function(){
var checkedCount = document.querySelectorAll('input.sub:checked').length;
checkAll.checked = checkedCount > 0;
checkAll.indeterminate = checkedCount > 0 && checkedCount < subOptions.length;
}
}
checkAll.onclick = function() {
for(var i=0; i<subOptions.length; i++) {
subOptions[i].checked = this.checked;
}
}
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.gradesub-filter{
width: 299px;
height: 335px;
margin: 30px 0px 0px 0px;
background-color: #ffffff;
}
.form-filter-shade{
padding: 16px 0px 9px 20px;
font-weight: 600;
font-size: 16px;
border-bottom: 2px solid #F0F0F0;
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
ul{
margin-left: -25px;
}
li{
list-style: none;
}
<div class="gradesub-filter">
<div class="form-filter-shade">Gradecheck</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<ul>
<li>
<label for="one"><input type="checkbox" id="one" />First checkbox</label>
<ul>
<li>
<label for="sub-one"><input class='sub' type="checkbox" id="sub-one" />Sub One checkbox</label>
</li>
<li>
<label for="sub-two"><input class='sub' type="checkbox" id="sub-two" />Sub Two checkbox</label>
</li>
<li>
<label for="sub-three"><input class='sub' type="checkbox" id="sub-three" />Sub Three checkbox</label>
</li>
</ul>
</li>
<li>
<label for="two"><input type="checkbox" id="two" />Second checkbox</label>
</li>
<li>
<label for="three"><input type="checkbox" id="three" />Third checkbox</label>
</li>
</ul>
</div>
</div>
</div>
Since you clearly not mentioned in the question, I thought it would be you looking for. If any help needed, Mention in the comment.

Error when trying to work on drop down with multi select?

var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.gradesub-filter{
width: 299px;
height: 335px;
margin: 30px 0px 0px 0px;
background-color: #ffffff;
}
.form-filter-shade{
padding: 16px 0px 9px 20px;
font-weight: 600;
font-size: 16px;
border-bottom: 2px solid #F0F0F0;
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<div class="gradesub-filter">
<div class="form-filter-shade">Gradecheck</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</div>
I am trying to do "Drop-down with multi select" with checkboxes as shown in the picture below. Now the issue with the code is unable to select the list from the dropdown.
I am thinking that the issue is in js code, where it is not fetching values during onclick, Can any one please suggest me to solve the issue

I think you are looking for nested Checkbox, Provided Image also suggest the same.
Here is the code snippet, simply added <ul> and <li> tags for checkboxes alignment and used some JavaScript query selectors for checkbox functioning.
var subOptions = document.querySelectorAll('input.sub');
var checkAll = document.getElementById("one");
for(var i = 0; i < subOptions.length; i++ ){
subOptions[i].onclick = function(){
var checkedCount = document.querySelectorAll('input.sub:checked').length;
checkAll.checked = checkedCount > 0;
checkAll.indeterminate = checkedCount > 0 && checkedCount < subOptions.length;
}
}
checkAll.onclick = function() {
for(var i=0; i<subOptions.length; i++) {
subOptions[i].checked = this.checked;
}
}
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.gradesub-filter{
width: 299px;
height: 335px;
margin: 30px 0px 0px 0px;
background-color: #ffffff;
}
.form-filter-shade{
padding: 16px 0px 9px 20px;
font-weight: 600;
font-size: 16px;
border-bottom: 2px solid #F0F0F0;
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
ul{
margin-left: -25px;
}
li{
list-style: none;
}
<div class="gradesub-filter">
<div class="form-filter-shade">Gradecheck</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<ul>
<li>
<label for="one"><input type="checkbox" id="one" />First checkbox</label>
<ul>
<li>
<label for="sub-one"><input class='sub' type="checkbox" id="sub-one" />Sub One checkbox</label>
</li>
<li>
<label for="sub-two"><input class='sub' type="checkbox" id="sub-two" />Sub Two checkbox</label>
</li>
<li>
<label for="sub-three"><input class='sub' type="checkbox" id="sub-three" />Sub Three checkbox</label>
</li>
</ul>
</li>
<li>
<label for="two"><input type="checkbox" id="two" />Second checkbox</label>
</li>
<li>
<label for="three"><input type="checkbox" id="three" />Third checkbox</label>
</li>
</ul>
</div>
</div>
</div>
Since you clearly not mentioned in the question, I thought it would be you looking for. If any help needed, Mention in the comment.

Display div element in forloop using querySelectorAll

I'm trying to display certain div elements in a forloop and would like javascript to identify the correct one. For example:
<div id="box">
<div class="red-box"></div>
</div>
<div id="box">
<div class="green-box"></div>
</div>
<div id="box">
<div class="blue-box"></div>
</div>
const boxes = document.querySelectorAll("#box");
for (var i = 0; i < boxes.length; i++) {
//if array is 0 display red box
//If array is 1 display a green box
//If array is 2 display a blue box
}
If I click the first div class box and want to display a red box but if I click the 3rd div class box it will display a blue box.

Use a class since Ids have to be unique. Add click event listener, show the child inside.
const boxes = document.querySelectorAll(".box");
for (var i = 0; i < boxes.length; i++) {
boxes[i].addEventListener("click", function () {
this.children[0].classList.toggle("active");
});
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
.box > div {
width: 100%;
height: 100%;
display: none;
}
.box > div.active {
display: block;
}
.red-box {
background-color: red;
}
.green-box {
background-color: green;
}
.blue-box {
background-color: blue;
}
<div class="box">
<div class="red-box"></div>
</div>
<div class="box">
<div class="green-box"></div>
</div>
<div class="box">
<div class="blue-box"></div>
</div>
And without JavaScript
.selector {
display: none;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
.box > div {
width: 100%;
height: 100%;
display: none;
}
.selector:checked + .box > div {
display: block;
}
.red-box {
background-color: red;
}
.green-box {
background-color: green;
}
.blue-box {
background-color: blue;
}
<input type="checkbox" id="box1" class="selector">
<label for="box1" class="box">
<div class="red-box"></div>
</label>
<input type="checkbox" id="box2" class="selector">
<label for="box2" class="box">
<div class="green-box"></div>
</label>
<input type="checkbox" id="box3" class="selector">
<label for="box3" class="box">
<div class="blue-box"></div>
</label>
<hr/>
<input type="radio" name="color" id="box1r" class="selector">
<label for="box1r" class="box">
<div class="red-box"></div>
</label>
<input type="radio" name="color" id="box2r" class="selector">
<label for="box2r" class="box">
<div class="green-box"></div>
</label>
<input type="radio" name="color" id="box3r" class="selector">
<label for="box3r" class="box">
<div class="blue-box"></div>
</label>

id must be unique.
Don't use id unless you have to.
Get rid of unnecessary parents.
I use data attributes for colors because it's easier than using class.
<div class="box" data-color="red"></div>
<div class="box" data-color="blue"></div>
<div class="box" data-color="green"></div>
and javascript:
let boxes = document.querySelectorAll(".box");
[...boxes].forEach(box => {
box.addEventListener("click", () => {
let color = event.target.dataset.color;
// You have color name now.
// Do whatever you want to do with it.
})
})

You can do something like this:
function fillDiv()
{
var div = document.getElementById('change');
var selection = document.getElementById('bgcolor').value;
var text = document.getElementById('message');
switch (selection)
{
case "1":
div.style.backgroundColor = 'green';
text.style.color = "lightblue";
break;
case "2":
div.style.backgroundColor = 'red';
text.style.color = "yellow";
break;
case "3":
div.style.backgroundColor = 'blue';
text.style.color = "white";
break;
}
}
h4.fill-div
{
display: block;
padding:10px;
width: 100%;
color: Green;
margin: auto;
text-align: center;
}
div.fill
{
height:30px;
width:100%;
position: absolute;
float:bottom;
background-color:#000000;
}
<div id="change" class="fill">
<h4 class="fill-div" id="message" >Hello world! </h4>
</div>
<br><br>
<select name="bgcolor" id="bgcolor" onchange="fillDiv()">
<option class="1" value=1>Green</option>
<option class="2" value=2>Red</option>
<option class="3" value=3>Blue</option>
</select>
<br>

styling dropdown with checkboxes

I want to change the styling of a dropdown with check boxes using only CSS and javascript. I have added a picture of what I am trying to make when the button is pressed.. It would be nice if I could make a focus to the selected check box just like the grey container at the first checkbox
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Group</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" /> Boiler
</label>
<label for="two">
<input type="checkbox" id="two" /> Engine
</label>
<label for="three">
<input type="checkbox" id="three" /> Fan
</label>
<label for="one">
<input type="checkbox" id="four" /> Location
</label>
<label for="two">
<input type="checkbox" id="five" /> Ship
</label>
<label for="three">
<input type="checkbox" id="six" /> Valmarine
</label>
<label for="three">
<input type="checkbox" id="seven" /> Voyage</label>
</div>
</div>
</form>
For example I want to change the color of the dropdown button, the color of the box with the arrow on the right of the dropbox, the color of the checkboxes (dark grey) etc..
I am trying to make it as simple as possible using only CSS and javascript.

You can get pretty far on css alone. Most of the trick here is using a pseudo element on checkbox to represent selected state.
No html and js changes in this solution.
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
* {
box-sizing: border-box;
}
body {
background: #0b4a79;
}
input[type="checkbox"]:checked::after {
border: 1px solid #a8a8a8;
background: #dadada;
background: linear-gradient(to bottom, #f0f0f0 0%, #c5c5c5 100%);
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: -10;
border-radius: 2px;
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
background: #0000;
border: none;
border-radius: 2px;
background: linear-gradient(to bottom, #c9dde8 0%, #86b3cc 100%);
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
background-color: #103c5d;
display: none;
border: 1px #dadada solid;
margin: 5px 0 0 0;
border-radius: 3px;
}
#checkboxes label {
display: block;
font-family: Helvetica, Arial, sans-serif;
margin: 4px;
padding: 3px 2px;
position: relative;
color: #ffffff;
background: rgba(0, 0, 0, 0);
z-index: 1;
}
#checkboxes label:hover {
background-color: #1e90ff;
border-radius: 2px;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Group</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" /> Boiler
</label>
<label for="two">
<input type="checkbox" id="two" /> Engine
</label>
<label for="three">
<input type="checkbox" id="three" /> Fan
</label>
<label for="one">
<input type="checkbox" id="four" /> Location
</label>
<label for="two">
<input type="checkbox" id="five" /> Ship
</label>
<label for="three">
<input type="checkbox" id="six" /> Valmarine
</label>
<label for="three">
<input type="checkbox" id="seven" /> Voyage</label>
</div>
</div>
</form>

To highlight the label you can go with something like mentioned in this post from #dfsq and add/remove a special class to your label on the click-event.
// get all your inputs within "#checkboxes label"
var checkedInput = document.querySelectorAll('#checkboxes label > input');
// loop over your inputs, by on change of your input (checked/unchecked)
// toggle the css class for the closest "label"
Array.from(checkedInput ).forEach(input => {
input.addEventListener('change', function(event) {
this.closest("label").classList.toggle("with-focus");
});
});
You can style then the new class
#checkboxes label.with-focus {
display: block;
background-color: #eee;
border-radius: 2px;
}
I've changed your snippet with this:
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
// get all your inputs within "#checkboxes label"
var checkedInput = document.querySelectorAll('#checkboxes label > input');
// loop over your inputs, by on change of your input (checked/unchecked)
// toggle the css class for the closest "label"
Array.from(checkedInput ).forEach(input => {
input.addEventListener('change', function(event) {
this.closest("label").classList.toggle("with-focus");
});
});
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
padding: 5px;
background-color: #103c5d;
}
#checkboxes label {
display: block;
}
#checkboxes label.with-focus {
display: block;
background-color: #eee;
border-radius: 2px;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Group</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" /> Boiler
</label>
<label for="two">
<input type="checkbox" id="two" /> Engine
</label>
<label for="three">
<input type="checkbox" id="three" /> Fan
</label>
<label for="one">
<input type="checkbox" id="four" /> Location
</label>
<label for="two">
<input type="checkbox" id="five" /> Ship
</label>
<label for="three">
<input type="checkbox" id="six" /> Valmarine
</label>
<label for="three">
<input type="checkbox" id="seven" /> Voyage</label>
</div>
</div>
</form>
For all the other CSS stuff you should probably dig around, thats not as hard as its sounds ;)

How to create checkbox inside dropdown?

I want to create a multiple selection dropbox list. Actually I have to select more than one option using a dropdown menu. When I simply do this as shown bellow:
<select>
<option><input type="checkbox"></option>
</select>
Then checkbox is showing in front of dropdown field. But I want to create it for each option not for as a whole so that I can select more than option. Is there any way to do this?

Here is a simple dropdown checklist:
var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
}
.dropdown-check-list {
display: inline-block;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}
<div id="list1" class="dropdown-check-list" tabindex="100">
<span class="anchor">Select Fruits</span>
<ul class="items">
<li><input type="checkbox" />Apple </li>
<li><input type="checkbox" />Orange</li>
<li><input type="checkbox" />Grapes </li>
<li><input type="checkbox" />Berry </li>
<li><input type="checkbox" />Mango </li>
<li><input type="checkbox" />Banana </li>
<li><input type="checkbox" />Tomato</li>
</ul>
</div>

This can't be done in just HTML (with form elements into option elements).
Or you can just use a standard select multiple field.
<select multiple>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</form>

I have to say in advance that I was greatly inspired by the answer of Naveen so I created my own solution based on the answer.
Following 3 functions are the basis of our multiselect:
initiazation function - detects when user clicks away in order to close the dropdown
function that detects when user clicks on dropdown to uncollapse it
function that detects checkbox click events to update the label
few improvements include:
design as in bootstrap 5
collapse when clicking away
updating the label with list of values
added Y-axis overflow with scrollbar
also I tried to stick to native JS (no jQuery) and to use as much of a native Bootstrap 5 styling as possible
here is the video:
I had no intentions to make a ready to use solution that would suit every persons' needs so please adjust it to your liking. I am personally looking forward to adding a search feature.
fiddle:
window.onload = (event) => {
initMultiselect();
};
function initMultiselect() {
checkboxStatusChange();
document.addEventListener("click", function(evt) {
var flyoutElement = document.getElementById('myMultiselect'),
targetElement = evt.target; // clicked element
do {
if (targetElement == flyoutElement) {
// This is a click inside. Do nothing, just return.
//console.log('click inside');
return;
}
// Go up the DOM
targetElement = targetElement.parentNode;
} while (targetElement);
// This is a click outside.
toggleCheckboxArea(true);
//console.log('click outside');
});
}
function checkboxStatusChange() {
var multiselect = document.getElementById("mySelectLabel");
var multiselectOption = multiselect.getElementsByTagName('option')[0];
var values = [];
var checkboxes = document.getElementById("mySelectOptions");
var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');
for (const item of checkedCheckboxes) {
var checkboxValue = item.getAttribute('value');
values.push(checkboxValue);
}
var dropdownValue = "Nothing is selected";
if (values.length > 0) {
dropdownValue = values.join(', ');
}
multiselectOption.innerText = dropdownValue;
}
function toggleCheckboxArea(onlyHide = false) {
var checkboxes = document.getElementById("mySelectOptions");
var displayValue = checkboxes.style.display;
if (displayValue != "block") {
if (onlyHide == false) {
checkboxes.style.display = "block";
}
} else {
checkboxes.style.display = "none";
}
}
.multiselect {
width: 100%;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#mySelectOptions {
display: none;
border: 0.5px #7c7c7c solid;
background-color: #ffffff;
max-height: 150px;
overflow-y: scroll;
}
#mySelectOptions label {
display: block;
font-weight: normal;
display: block;
white-space: nowrap;
min-height: 1.2em;
background-color: #ffffff00;
padding: 0 2.25rem 0 .75rem;
/* padding: .375rem 2.25rem .375rem .75rem; */
}
#mySelectOptions label:hover {
background-color: #1e90ff;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="form-group col-sm-8">
<label for="dur">BS original select</label>
<select id="dur" class="form-select">
<option value="12" selected>One Year</option>
<option value="24">Two Year</option>
<option value="36">Three Year</option>
<option value="48">Four year</option>
<option value="60">Five Year</option>
</select>
</div>
<div class="form-group col-sm-8">
<label for="myMultiselect">BS custom multiselect</label>
<div id="myMultiselect" class="multiselect">
<div id="mySelectLabel" class="selectBox" onclick="toggleCheckboxArea()">
<select class="form-select">
<option>somevalue</option>
</select>
<div class="overSelect"></div>
</div>
<div id="mySelectOptions">
<label for="one"><input type="checkbox" id="one" onchange="checkboxStatusChange()" value="one" /> First checkbox</label>
<label for="two"><input type="checkbox" id="two" onchange="checkboxStatusChange()" value="two" /> Second checkbox</label>
<label for="three"><input type="checkbox" id="three" onchange="checkboxStatusChange()" value="three" /> Third checkbox</label>
<label for="four"><input type="checkbox" id="four" onchange="checkboxStatusChange()" value="four" /> Third checkbox</label>
<label for="five"><input type="checkbox" id="five" onchange="checkboxStatusChange()" value="five" /> First checkbox</label>
<label for="six"><input type="checkbox" id="six" onchange="checkboxStatusChange()" value="six" /> Second checkbox</label>
<label for="seven"><input type="checkbox" id="seven" onchange="checkboxStatusChange()" value="seven" /> Third checkbox</label>
<label for="eight"><input type="checkbox" id="eight" onchange="checkboxStatusChange()" value="eight" /> First checkbox</label>
<label for="nine"><input type="checkbox" id="nine" onchange="checkboxStatusChange()" value="nine" /> Second checkbox</label>
<label for="ten"><input type="checkbox" id="ten" onchange="checkboxStatusChange()" value="ten" /> Third checkbox</label>
</div>
</div>
</div>
</div>

You can always use multiple or multiple = "true" option with a select tag, but there is one jquery plugin which makes it more beautiful. It is called chosen and can be found here.
This fiddle-example might help you to get started
Thank you.

Very simple code with Bootstrap and JQuery without any additional javascript code :
HTML :
.dropdown-menu label {
display: block;
}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<form class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<label class="dropdown-item"><input type="checkbox" name="" value="one">First checkbox</label>
<label class="dropdown-item"><input type="checkbox" name="" value="two">Second checkbox</label>
<label class="dropdown-item"><input type="checkbox" name="" value="three">Third checkbox</label>
</form>
</div>
https://codepen.io/funkycram/pen/joVYBv

Multiple drop downs with checkbox's and jQuery.
jQuery(function($) {
var checkList = $('.dropdown-check-list');
checkList.on('click', 'span.anchor', function(event) {
var element = $(this).parent();
if (element.hasClass('visible')) {
element.removeClass('visible');
} else {
element.addClass('visible');
}
});
});
.dropdown-check-list {
display: inline-block;
width: 100%;
}
.dropdown-check-list:focus {
outline: 0;
}
.dropdown-check-list .anchor {
width: 98%;
position: relative;
cursor: pointer;
display: inline-block;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
border: 1px #ccc solid;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list3" class="dropdown-check-list" tabindex="100">
<span class="anchor">Which development(s) are you interested in?</span>
<ul class="items">
<li><input id="answers_2529_the-lawns" name="answers[2529][answers][]" type="checkbox" value="The Lawns" /><label for="answers_2529_the-lawns">The Lawns</label></li>
<li><input id="answers_2529_the-residence" name="answers[2529][answers][]" type="checkbox" value="The Residence" /><label for="answers_2529_the-residence">The Residence</label></li>
</ul>
</div>

Simply use bootstrap-multiselect where you can populate dropdown with multiselect option and many more feaatures.
For doc and tutorials you may visit below link
https://www.npmjs.com/package/bootstrap-multiselect
http://davidstutz.de/bootstrap-multiselect/