<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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-full">
<h1>Bootstrap Button Select</h1>
<div class="navbar-filter">
<div class="keywordscontainer">
<input type="text" class="form-control" />
</div>
<div class="labelcontainer">
Price:
</div>
<div class="selectcontainer">
<a class="btn btn-info btn-select">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">$0</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>$100,000</li>
<li>$200,000</li>
<li>$300,000</li>
<li>$400,000</li>
<li>$500,000</li>
</ul>
</a>
</div>
<div class="selectcontainer">
<a class="btn btn-info btn-select">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Any</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>$100,000</li>
<li>$200,000</li>
<li>$300,000</li>
<li>$400,000</li>
<li>$500,000</li>
</ul>
</a>
</div>
<div class="selectcontainer">
<a class="btn btn-info btn-select">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">0+ Beds</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>1+ Beds</li>
<li>2+ Beds</li>
<li>3+ Beds</li>
<li>4+ Beds</li>
</ul>
</a>
</div>
<div class="selectcontainer">
<a class="btn btn-info btn-select">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">0+ Baths</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
<ul>
<li>1+ Baths</li>
<li>2+ Baths</li>
<li>3+ Baths</li>
<li>4+ Baths</li>
</ul>
</a>
</div>
</div>
</div>
.navbar-filter
{
width:100%;
background-color: #89c4f4;
border: white 1px solid;
}
.labelcontainer{
margin-left: 20px;
margin-right: 20px;
display: inline-block;
font-weight: bold;
}
.keywordscontainer input{
display: inline-block;
height: 40px;
}
.keywordscontainer{
width: 300px;
display: inline-block;
}
.selectcontainer{
width: 120px;
display: inline-block;
}
.btn-select {
position: relative;
padding: 0;
min-width: 125px;
width: 100%;
border-radius: 0;
/*margin-bottom: 20px;*/
}
.btn-select .btn-select-value {
padding: 6px 12px;
display: block;
position: absolute;
line-height: 40px;
left: 0;
right: 34px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
border-top: none !important;
border-bottom: none !important;
border-left: none !important;
color: black;/*Value text Color*/
font-size: 15px;
font-weight: bold;
}
.btn-select .btn-select-arrow {
float: right;
line-height: 40px;
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: 53px;
z-index: 999;
}
.btn-select ul li {
padding: 3px 6px;
text-align: left;
line-height: 40px;
}
.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: #89c4f4 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 Outside Border color ON Hover*/
.btn-select.btn-info, .btn-select.btn-info, .btn-select.btn-info {
background-color: #89c4f4;
border-color: white;
border-top: 0px;
border-bottom: 0px;
}
.btn-select.btn-info:hover, .btn-select.btn-info:active, .btn-select.btn-info.active {
border-color: white;
}
.btn-select.btn-info ul li.selected {
background-color: #89c4f4;
color: white;
}
.btn-select.btn-info ul {
border: #89c4f4 1px solid;
}
.btn-select.btn-info .btn-select-value {
background-color: #89c4f4;
border: white 1px solid;
}
.btn-select.btn-info:hover, .btn-select.btn-info.active {
background-color: #89c4f5;
}
/* 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(1);
$(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();
}
});
