Bootstrap Snippet select controlling tabs using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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">
    <div class="row">
        <div class="col-sm-3 nav-container">
            <div class="form-group">
                <select class="form-control nav">
                    <option value="" selected disabled>seleziona una serie</option>
                    <option value="serie-0">Vivaro - T180</option>
                    <option value="serie-1">San Vito al Tgl. - TM10</option>
                </select>
            </div>
         </div>
         <div class="col-sm-9">
             <div class="select-pane" id="serie-0">SERIE 0</div>
             <div class="select-pane" id="serie-1">SERIE 1</div>
         </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
.select-pane {
    display:none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).on('change','select.nav',function(){
    var $this = this;
    var target = $this.value;
    $('div.select-pane').hide();
    $('div[id="'+target+'"]').show();
})
$(document).on('click','.series-select',function(){
  var $this = this;
  var txt = $this.text+'<span class="caret"></span>';
  $($this).closest('li.dropdown').find('a.dropdown-toggle').html(txt);
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"select controlling tabs"
Bootstrap 3.3.0 Snippet by gaghigogu

Related: See More

Questions / Comments:

"select controlling tabs" Bootstrap 3.3.0 Snippet by gaghigogu

Related: See More

Questions / Comments:

"select controlling tabs"
Bootstrap 3.3.0 Snippet by gaghigogu