Bootstrap3级联多选下拉框
程序员文章站
2022-03-20 20:03:00
1 2 3 4 Bootstrap3级联多选下拉框 5 6
1 <!doctype html>
2 <html>
3 <head>
4 <title>bootstrap3级联多选下拉框</title>
5 <meta charset="utf-8">
6 <link rel="stylesheet" href="f:/webclient/bootstrap-3.3.7-dist/css/bootstrap.min.css">
7 <link rel="stylesheet" href="./bootstrap-select.css">
8 <style>
9 body {
10 padding-top: 70px;
11 }
12 </style>
13 </head>
14 <body>
15 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
16 <div class="container">
17 <div class="navbar-header">
18 <a class="navbar-brand" href="#">bootstrap-select usability tests</a>
19 </div>
20 </div>
21 </nav>
22 <div class="container">
23 <select id="first-disabled" class="selectpicker" multiple data-hide-disabled="true" data-live-search="true">
24 <optgroup disabled="disabled" label="disabled">
25 <option>hidden</option>
26 </optgroup>
27 <optgroup label="fruit">
28 <option>apple</option>
29 <option>orange</option>
30 </optgroup>
31 <optgroup label="vegetable">
32 <option>corn</option>
33 <option>carrot</option>
34 </optgroup>
35 </select>
36 </div>
37 <script src="f:/webclient/angularjs/scripts/jquery-1.9.1/jquery.min.js"></script>
38 <script src="f:/webclient/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
39 <script src="./bootstrap-select.js"></script>
40 </body>
41 </html>