Display currently selected option in dropdown? - html

Question

I have the following code:
<form class="search-bar" data-example-id="search-bar">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
<div class="input-group-btn">
<button type="button" class="btn btn-default">Search</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
</div><!-- /.input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
What I am trying to do is get it functioning so that if a user clicks the dropdown and selections Option 1, Option 1 will be displayed in the dropdown rather than the little caret glyph.
This is using Bootstrap, just to clarify.

Answer 1

You use Bootstrap Select instead of Bootstrap dropdown:
http://silviomoreto.github.io/bootstrap-select/

Answer 2

You need to add some JS magic. Here's in jQuery flavour
jQuery
$(".dropdown-menu li a").click(function(){
$(this).parents(".input-group-btn").find('.dropdown-toggle').text($(this).text());
$(this).parents(".input-group-btn").find('.dropdown-toggle').val($(this).text());
});
Your HTML
<form class="search-bar" data-example-id="search-bar">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
<div class="input-group-btn">
<button type="button" class="btn btn-default">Search</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
</div><!-- /.input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
And here's a working demo.
EDIT: You can stick this in the head of your page like so
<script type="text/javascript">
$(document).ready(function () {
$(".dropdown-menu li a").click(function () {
$(this).parents(".input-group-btn").find('.dropdown-toggle').text($(this).text());
$(this).parents(".input-group-btn").find('.dropdown-toggle').val($(this).text());
});
});
</script>