<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="jumbotron text-center"><h2>DROPDOWN SELECT INSIDE FORM ELEMENTS</h2></div> <div class="row"> <div class="col-sm-3 col-sm-offset-5"> <div class="panel panel-default"> <div class="panel-body"> <div id="ddSinif" class="dropdownselect dropdown"> <button class="seldd dropdown-toggle text-left" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"> <span id="sahteselect">Ekonomi</span><span class="caret"></span> </button> <div class="dropdown-menu text-center" aria-labelledby="dropdownMenu2"> <div class="sayi"> <strong>Yetişkin</strong> <div class="artieksi"><span class="arti plus" id="yetiskin"><i class="glyphicon glyphicon-plus"></i></span><input type="number" class="count" id="countyetiskin" name="adet" value="0"><span class="arti minus" id="yetiskin"><i class="glyphicon glyphicon-minus"></i></span></div> </div> <div class="sayi"> <strong>Çocuk <span>2-12 Yaş</span></strong> <div class="artieksi"><span class="arti plus" id="cocuk"><i class="glyphicon glyphicon-plus"></i></span><input type="number" class="count" id="countcocuk" name="adet" value="0"><span class="arti minus" id="cocuk"><i class="glyphicon glyphicon-minus"></i></span></div> </div> <div class="sayi"> <strong>Bebek <span>0-2 Yaş</span></strong> <div class="artieksi"><span class="arti plus" id="bebek"><i class="glyphicon glyphicon-plus"></i></span><input type="number" class="count" id="countbebek" name="adet" value="0"><span class="arti minus" id="bebek"><i class="glyphicon glyphicon-minus"></i></span></div> </div> <select class="form-control" name="sinif" id="sinif"> <option selected>Ekonomi</option> <option>Business</option> </select> <button id="btnFilter" class="btn btn-success">Tamam</button> </div> </div> </div> </div> </div> </div> </div>

.seldd{ width:100%; height:50px; background-color:#fff; border:1px solid #c0c0c0; } #ddSinif .caret{ float:right; margin-top:10px; margin-right:10px; } .seldd { padding:12px 5px 12px 10px; border: 1px solid #d0d0d0; font-size: 16px; width: 100%; text-align: left; background-color: #fff; } .dropdownselect .dropdown-menu { width: 100%; padding: 20px; } .artieksi { width: 100%; } .dropdown-menu .arti { font-size: 1em; padding: 3px; border: 1px solid #1b2435; border-radius: 50%; width: 25px; height: 25px; float: left; text-align: center; } .dropdown-menu .minus { float: right !important; } .dropdown-menu .btn { width: 100%; } .count { border: 0px !important; background-color: transparent !important; width: 40px !important; padding: 0px !important; height: 30px !important; text-align: right; } .sayi { text-align: center; width: 100%; margin-bottom: 20px; border: 1px solid #c0c0c0; border-radius: 15px; padding: 10px; } .sayi strong span { font-size: 0.7em; color: #919191 }

$(document).ready(function () { $('.count').prop('disabled', true); $('.plus').click(function () { var id = $(this).attr('id') $('#count' + id).val(parseInt($('#count' + id).val()) + 1); }); $('.minus').click(function () { var id = $(this).attr('id') $('#count' + id).val(parseInt($('#count' + id).val()) - 1); if ($('#count' + id).val() < 0) { $('#count' + id).val(0); } }); }); $('#btnFilter').click(function () { $(this).parents('.dropdown').find('button.dropdown-toggle').dropdown('toggle') }); $('.dropdown-menu').on('click', function (event) { event.stopPropagation(); }); $('#sinif').on('change', function () { $('#sahteselect').text(this.value); });