Bootstrap Snippet Text input with dropdown select addon using HTML 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
<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 ---------->
<!-- Based on: http://bootsnipp.com/snippets/featured/multiple-control-input-group -->
<br/>
<div class="container">
    <div class="row">
        <div class="form-group">
            <label for="inpuFname">Text input with dropdown select</label>
            <div class="input-group">
                <input type="text" value="" class="form-control" name="text">
                <div class="input-group-btn bs-dropdown-to-select-group">
                    <button type="button" class="btn btn-default dropdown-toggle as-is bs-dropdown-to-select" data-toggle="dropdown">
                        <span data-bind="bs-drp-sel-label">Select...</span>
                        <input type="hidden" name="selected_value" data-bind="bs-drp-sel-value" value="">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu" role="menu" style="">
                        <li data-value="1"><a href="#">One</a></li>
                        <li data-value="2"><a href="#">Two</a></li>
                        <li data-value="3"><a href="#">Three</a></li>
                    </ul>
                </div>
            </div>
        </div>
        Check the hidden field for values!
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(e){
    $( document ).on( 'click', '.bs-dropdown-to-select-group .dropdown-menu li', function( event ) {
        var $target = $( event.currentTarget );
        $target.closest('.bs-dropdown-to-select-group')
            .find('[data-bind="bs-drp-sel-value"]').val($target.attr('data-value'))
            .end()
            .children('.dropdown-toggle').dropdown('toggle');
        $target.closest('.bs-dropdown-to-select-group')
            .find('[data-bind="bs-drp-sel-label"]').text($target.context.textContent);
        return false;
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX