"Bootstrap Button Select"
Bootstrap 3.3.0 Snippet by Jerbo06

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

How can i disable any list item ?

hissan ahmad () - 7 years ago - Reply 0


any idea how you can use with asp:dropdown list

sadiqhirani () - 8 years ago - Reply 0