Bootstrap Snippet Dropdown Select inside form elements using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(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);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Dropdown Select inside form elements"
Bootstrap 3.3.0 Snippet by tokage

Related: See More

Questions / Comments:

"Dropdown Select inside form elements" Bootstrap 3.3.0 Snippet by tokage

Related: See More

Questions / Comments:

"Dropdown Select inside form elements"
Bootstrap 3.3.0 Snippet by tokage