<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="d-flex flex-column align-items-center h-100">
<div class="col-md-4 my-5">
<h1>Custom Select box JS/jQuery using Bootstrap and Font Awesome</h1>
</div>
<!-- Make sure you wrap the input inside a form group -->
<div class="col-md-4">
<div class="form-group form-custom-select">
<!--Label is not necessary in order for the script to work-->
<label for="ExampleCustomSelectBox"><strong>Select a option</strong></label>
<!-- Create an input with type hidden and have a use of HTML data tag -->
<!-- HTML is allowed as option label -->
<input
type="hidden"
name="ExampleCustomSelectBox"
id="ExampleCustomSelectBox"
data-toggle="custom-select"
>
<!-- To get the selection value, you must get ExampleCustomSelectBox.val -->
</div>
<h5>Selection log</h5>
<p>Select a value from the dropdown</p>
<ul id="SelectionLog"></ul>
</div>
</div>
</body>
<div style="position: fixed;bottom: 5%;right: 5%;">
<h5 style="margin-bottom: 1rem;padding-bottom: 1rem;border-bottom: 1px solid #000;text-align: center;">Support my work @ MMLTech</h5>
<div style="display: flex;align-items: center;">
<a style="margin-right:1rem;background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://ko-fi.com/mmltech" target="_blank"><img src="https://storage.ko-fi.com/cdn/Kofi_Logo_Blue.svg" width="60px"/> Buy me a coffee</a>
<a style="background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://obscountdown.com" target="_blank"><img src="https://streamcd.net/Assets/images/logo-white.png" width="60px" height="19px" /> My projects</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</html>
body, html{
width:100%;
height:100%;
}
.form-custom-select{
position: relative;
}
.form-custom-select ul{
position: absolute;
left:0;
display: none;
list-style-type: none;
margin: 0;
padding: 0;
background: #fff;
border: 1px solid #ced4da;
width: 100%;
border-radius: 0 0 0.25rem 0.25rem;
}
.custom-select-dropdown:after{
content: "\25BC";
margin-left: auto;
font-weight: bold;
position: absolute;
right: 1rem;
}
.custom-select-dropdown,
.form-custom-select ul li{
padding:.55rem 1rem;
cursor: pointer;
display: flex;
align-items: center;
-webkit-transition: .3s all;
-moz-transition: .3s all;
-ms-transition: .3s all;
-o-transition: .3s all;
transition: .3s all;
}
.form-custom-select ul li.selected,
.form-custom-select ul li:hover{
background: rgb(214 231 249 / 50%);
}
.custom-select-dropdown i,
.form-custom-select ul li i{
width:24px;
}
.custom-select-dropdown,
.form-custom-select ul li *:not(:last-child){
margin-right: 1rem;
}
.form-custom-select.toggled .custom-select-dropdown{
border-radius: 0.25rem 0.25rem 0 0;
border-bottom: none;
}
.form-custom-select.toggled .custom-select-dropdown:after{
content: '\25B2';
}
.form-custom-select.toggled ul{
display: initial;
}
.form-custom-select.toggled ul.with-dividers li:not(:last-child){
border-bottom: 1px solid #ced4da;
}
(function($){
$.fn.customSelect = function(options) {
let settings = $.extend({
options: [],
dividers: false,
}, options);
let build = function (e) {
let parent = $(e).closest(".form-group"),
toggler = $("<div class='form-control custom-select-dropdown' data-toggle='custom-select-dropdown'></div>"),
list = $("<ul></ul>");
if(settings.dividers)
list.toggleClass("with-dividers");
list.html("");
$.each(settings.options, function (k, v) {
let option = $("<li></li>");
option.attr("data-value", v[0]);
option.attr("data-selected", v[2]);
if(v[2])
{
option.addClass("selected");
toggler.html(v[1]);
}
option.html(v[1]);
list.append(option);
});
parent.append(toggler);
parent.append(list);
$(document).on("click", "[data-toggle='custom-select-dropdown'], .form-custom-select label" ,function () {
$(this).closest(".form-group").toggleClass("toggled")
});
$(document).on("click", ".form-custom-select ul li:not(.selected)" ,function () {
let p = $(this).closest("ul");
$.each(p.children(), function (k, v) {
$(this).removeClass("selected");
});
$(this).addClass("selected");
parent.toggleClass("toggled");
$(e).val($(this).attr("data-value")).trigger("change");
toggler.html($(this).html());
});
$(document).mouseup(function(e)
{
// if the target of the click isn't the container nor a descendant of the container
if (parent.hasClass("toggled") && !list.is(e.target) && list.has(e.target).length === 0)
{
parent.toggleClass("toggled");
}
});
};
return this.each(function() {
return new build(this, settings);
});
};
})(jQuery);
$(document).ready(function () {
$("#ExampleCustomSelectBox").customSelect({
dividers: true,
options: [
// Value / Select option / Is selected
[1, '<i class="fas fa-check"></i> Option 1', false],
[2, '<i class="fas fa-check"></i> Option 2', false],
[3, '<i class="fas fa-check"></i> Option 3', true],
[4, '<i class="fas fa-check"></i> Option 4', false],
[5, '<i class="fas fa-check"></i> Option 5', false],
[6, '<i class="fas fa-check"></i> Option 6', false],
[7, '<i class="fas fa-check"></i> Option 7', false],
]
})
});
$(document).on("change", "input[name=ExampleCustomSelectBox]", function () {
$("#SelectionLog").append("<li>Selected value: " + $(this).val()+ "</li>")
})
