"Multiple Control Input Group"
Bootstrap 3.1.0 Snippet by alilishan

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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="form-group">
<label for="inpuFname">Multi Level Input</label>
<div class="input-group below24 bias-input-group">
<span class="input-group-addon">http://conttact.us/</span>
<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" tabindex="-1">
<span data-bind="bs-drp-sel-label">us</span>
<input type="hidden" name="country_path" data-bind="bs-drp-sel-value" value="us">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu" style=" max-height: 300px; overflow: scroll; overflow-y: scroll; overflow-x: hidden; ">
<!-- Loop -->
<li data-value="af"><a href="#">af - Afghanistan </a></li>
<li data-value="ax"><a href="#">ax - Aland Islands </a></li>
<li data-value="al"><a href="#">al - Albania </a></li>
<li data-value="dz"><a href="#">dz - Algeria </a></li>
<li data-value="as"><a href="#">as - American Samoa </a></li>
<li data-value="ad"><a href="#">ad - Andorra </a></li>
<li data-value="ao"><a href="#">ao - Angola </a></li>
<li data-value="ai"><a href="#">ai - Anguilla </a></li>
<!-- END Loop -->
</ul>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
.bias-input-group .input-group-addon + .input-group-btn > .btn {border-radius: 0;}
.bias-input-group .input-group-addon + .input-group-btn + .input-group-addon {border-right: 0; border-left: 0;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(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.attr('data-value'));/*$target.text()*/
return false;
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Hello~
For the data-bind="bs-drp-sel-label" section of the HTML, I'm getting an error thrown that it is expecting a : after the bs. Is this not the correct syntax? Any help would be greatly appreciated. Thank you.

k3nSchr0eder () - 10 years ago - Reply 0