Bootstrap3级联多选下拉框

 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 testsa>
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>Hiddenoption>
26             optgroup>
27             <optgroup label="Fruit">
28               <option>Appleoption>
29               <option>Orangeoption>
30             optgroup>
31             <optgroup label="Vegetable">
32               <option>Cornoption>
33               <option>Carrotoption>
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>

Bootstrap3级联多选下拉框_第1张图片Bootstrap3级联多选下拉框_第2张图片Bootstrap3级联多选下拉框_第3张图片Bootstrap3级联多选下拉框_第4张图片

你可能感兴趣的:(Bootstrap3级联多选下拉框)