"Untitled"
Bootstrap 3.3.0 Snippet by calvin52019

Post to Facebook Tweet this

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 ---------->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="http://www.jq22.com/demo/bootstrapselect201901090009/css/bootstrap-select.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="http://www.jq22.com/demo/bootstrapselect201901090009/js/bootstrap-select.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="text-center">Bootstrap multi-select</h2>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button id="showInfo" type="button" class="btn btn-success btn-lg btn-block">SHOW</button>
</div>
<div class="col-md-4">
<button id="hideInfo" type="button" class="btn btn-danger btn-lg btn-block">HIDDEN</button>
</div>
<div class="col-md-4">
<button id="chooseText" type="button" class="btn btn-warning btn-lg btn-block">Selected Information</button>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-4">
<select id="id_select" class="selectpicker" multiple data-live-search="true" data-actions-box="true"></select>
</div>
<div class="col-md-6 col-md-offset-4">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.m-t-20 {
margin-top: 20px;
}
.m-l-30 {
margin-left: 30px;
}
.m-t-5 {
margin-top: 5px;
}
.m-l-50 {
margin-left: 50px;
}
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
init();
function init() {
//
initInfo();
}
function loadInfo() {
// 默认数据
var area = document.getElementById("id_select");
area.options.length = 0;
result = {
"6": "湖南",
"7": "江苏",
"8": "江西",
"9": "广东",
"10": "重庆",
"11": "广西",
"17": "浙江",
"18": "湖北",
"19": "山东",
"20": "陕西"
};
for (var item in result) {
area.options.add(new Option(result[item], result[item]));
}
$('.selectpicker').selectpicker('refresh');
}
function initInfo() {
$(window).on('load', function () {
$('.selectpicker').selectpicker({
// 'selectedText': 'cat',
noneSelectedText: '请选择',
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rubik Presentation Page

Questions / Comments: