<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h1>Bootstrap Button Select</h1>
<div class="row">
<div class="col-xs-6 col-sm-3">
<h5>.btn-default</h5>
<a class="btn btn-default btn-select">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Select an Item</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>Option 1</li>
<li class="selected">Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</a>
</div>
<div class="col-xs-6 col-sm-3">
<h5>.btn-default .btn-select-light</h5>
<a class="btn btn-default btn-select btn-select-light">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Select an Item</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</a>
</div>
<div class="col-xs-6 col-sm-3">
<h5>.btn-primary</h5>
<a class="btn btn-primary btn-select">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Select an Item</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>Option 1</li>
<li class="selected">Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</a>
</div>
<div class="col-xs-6 col-sm-3">
<h5>.btn-primary .btn-select-light</h5>
<a class="btn btn-primary btn-select btn-select-light">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Select an Item</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</a>
</div>
<div class="col-xs-6 col-sm-3">
<h5>.btn-success</h5>
<a class="btn btn-success btn-select">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Select an Item</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>Option 1</li>
<li class="selected">Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</a>
</div>
<div class="col-xs-6 col-sm-3">
<h5>.btn-success .btn-select-light</h5>
<a class="btn btn-success btn-select btn-select-light">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Select an Item</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</a>
</div>
<div class="col-xs-6 col-sm-3">
<h5>.btn-info</h5>
<a class="btn btn-info btn-select">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Select an Item</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>Option 1</li>
<li class="selected">Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</a>
</div>
<div class="col-xs-6 col-sm-3">
<h5>.btn-info .btn-select-light</h5>
<a class="btn btn-info btn-select btn-select-light">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Select an Item</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</a>
</div>
<div class="col-xs-6 col-sm-3">
<h5>.btn-warning</h5>
<a class="btn btn-warning btn-select">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Select an Item</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>Option 1</li>
<li class="selected">Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</a>
</div>
<div class="col-xs-6 col-sm-3">
<h5>.btn-warning .btn-select-light</h5>
<a class="btn btn-warning btn-select btn-select-light">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Select an Item</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</a>
</div>
<div class="col-xs-6 col-sm-3">
<h5>.btn-danger</h5>
<a class="btn btn-danger btn-select">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Select an Item</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>Option 1</li>
<li class="selected">Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</a>
</div>
<div class="col-xs-6 col-sm-3">
<h5>.btn-danger .btn-select-light</h5>
<a class="btn btn-danger btn-select btn-select-light">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Select an Item</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</a>
</div>
<div class="col-xs-12">
<h3><u>Instructions</u></h3>
<h4>1. Include CSS</h4>
<h4>2. Include Javascript</h4>
<h4>3. HTML</h4>
<pre>
<a class="btn btn-primary btn-select btn-select-light">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Select an Item</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>Option 1</li>
<li class="selected">Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</a>
</pre>
</div>
</div>
</div>
.btn-select {
position: relative;
padding: 0;
min-width: 236px;
width: 100%;
border-radius: 0;
margin-bottom: 20px;
}
.btn-select .btn-select-value {
padding: 6px 12px;
display: block;
position: absolute;
left: 0;
right: 34px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
border-top: none !important;
border-bottom: none !important;
border-left: none !important;
}
.btn-select .btn-select-arrow {
float: right;
line-height: 20px;
padding: 6px 10px;
top: 0;
}
.btn-select ul {
display: none;
background-color: white;
color: black;
clear: both;
list-style: none;
padding: 0;
margin: 0;
border-top: none !important;
position: absolute;
left: -1px;
right: -1px;
top: 33px;
z-index: 999;
}
.btn-select ul li {
padding: 3px 6px;
text-align: left;
}
.btn-select ul li:hover {
background-color: #f4f4f4;
}
.btn-select ul li.selected {
color: white;
}
/* Default Start */
.btn-select.btn-default:hover, .btn-select.btn-default:active, .btn-select.btn-default.active {
border-color: #ccc;
}
.btn-select.btn-default ul li.selected {
background-color: #ccc;
}
.btn-select.btn-default ul, .btn-select.btn-default .btn-select-value {
background-color: white;
border: #ccc 1px solid;
}
.btn-select.btn-default:hover, .btn-select.btn-default.active {
background-color: #e6e6e6;
}
/* Default End */
/* Primary Start */
.btn-select.btn-primary:hover, .btn-select.btn-primary:active, .btn-select.btn-primary.active {
border-color: #286090;
}
.btn-select.btn-primary ul li.selected {
background-color: #2e6da4;
color: white;
}
.btn-select.btn-primary ul {
border: #2e6da4 1px solid;
}
.btn-select.btn-primary .btn-select-value {
background-color: #428bca;
border: #2e6da4 1px solid;
}
.btn-select.btn-primary:hover, .btn-select.btn-primary.active {
background-color: #286090;
}
/* Primary End */
/* Success Start */
.btn-select.btn-success:hover, .btn-select.btn-success:active, .btn-select.btn-success.active {
border-color: #4cae4c;
}
.btn-select.btn-success ul li.selected {
background-color: #4cae4c;
color: white;
}
.btn-select.btn-success ul {
border: #4cae4c 1px solid;
}
.btn-select.btn-success .btn-select-value {
background-color: #5cb85c;
border: #4cae4c 1px solid;
}
.btn-select.btn-success:hover, .btn-select.btn-success.active {
background-color: #449d44;
}
/* Success End */
/* info Start */
.btn-select.btn-info:hover, .btn-select.btn-info:active, .btn-select.btn-info.active {
border-color: #46b8da;
}
.btn-select.btn-info ul li.selected {
background-color: #46b8da;
color: white;
}
.btn-select.btn-info ul {
border: #46b8da 1px solid;
}
.btn-select.btn-info .btn-select-value {
background-color: #5bc0de;
border: #46b8da 1px solid;
}
.btn-select.btn-info:hover, .btn-select.btn-info.active {
background-color: #269abc;
}
/* info End */
/* warning Start */
.btn-select.btn-warning:hover, .btn-select.btn-warning:active, .btn-select.btn-warning.active {
border-color: #eea236;
}
.btn-select.btn-warning ul li.selected {
background-color: #eea236;
color: white;
}
.btn-select.btn-warning ul {
border: #eea236 1px solid;
}
.btn-select.btn-warning .btn-select-value {
background-color: #f0ad4e;
border: #eea236 1px solid;
}
.btn-select.btn-warning:hover, .btn-select.btn-warning.active {
background-color: #d58512;
}
/* warning End */
/* danger Start */
.btn-select.btn-danger:hover, .btn-select.btn-danger:active, .btn-select.btn-danger.active {
border-color: #d43f3a;
}
.btn-select.btn-danger ul li.selected {
background-color: #d43f3a;
color: white;
}
.btn-select.btn-danger ul {
border: #d43f3a 1px solid;
}
.btn-select.btn-danger .btn-select-value {
background-color: #d9534f;
border: #d43f3a 1px solid;
}
.btn-select.btn-danger:hover, .btn-select.btn-danger.active {
background-color: #c9302c;
}
/* danger End */
.btn-select.btn-select-light .btn-select-value {
background-color: white;
color: black;
}
$(document).ready(function () {
$(".btn-select").each(function (e) {
var value = $(this).find("ul li.selected").html();
if (value != undefined) {
$(this).find(".btn-select-input").val(value);
$(this).find(".btn-select-value").html(value);
}
});
});
$(document).on('click', '.btn-select', function (e) {
e.preventDefault();
var ul = $(this).find("ul");
if ($(this).hasClass("active")) {
if (ul.find("li").is(e.target)) {
var target = $(e.target);
target.addClass("selected").siblings().removeClass("selected");
var value = target.html();
$(this).find(".btn-select-input").val(value);
$(this).find(".btn-select-value").html(value);
}
ul.hide();
$(this).removeClass("active");
}
else {
$('.btn-select').not(this).each(function () {
$(this).removeClass("active").find("ul").hide();
});
ul.slideDown(300);
$(this).addClass("active");
}
});
$(document).on('click', function (e) {
var target = $(e.target).closest(".btn-select");
if (!target.length) {
$(".btn-select").removeClass("active").find("ul").hide();
}
});
