<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>

.select-pane { display:none; }

$(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); })