Item not selected in Dropdown menu

Question

Using bootstrap, I am selecting dropdown menu but it's not working and selected item is not appearing on top of the list.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
<button type="button" class="form-control btn btn-default dropdown-toggle" data-toggle="dropdown">
    Select Business type <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
    <li><a href="#">small</a></li>
    <li><a href="#">medium</a></li>
    <li><a href="#">large</a></li>
</ul>

Answer 1

You will need some JavaScript to store the text value of the selected option in the button.

As you are already using jQuery you can bind to the click event of the list items and then copy the text of the item to the text value of the button.

However, you also have to preserve the little caret <span class="caret"></span> so you can either make a template or just copy it and append it after the text has been changed.

In the below example I went with the find/append option.

$('.dropdown-menu li').on('click', function() {
  var $dropdown = $('.dropdown-toggle');
  var text = $(this).text();
  var $span = $dropdown.find('span');
  
  $dropdown.text(text).append($span);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group">
  <button type="button" class="form-control btn btn-default dropdown-toggle" data-toggle="dropdown">
    Select Business type <span class="caret"></span>
</button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">small</a></li>
    <li><a href="#">medium</a></li>
    <li><a href="#">large</a></li>
  </ul>

If you want to get fancier you could store the "template" in a variable and re-use it, similar to this:

var dropdownTextTemplate = '{0} <span class="caret"></span>'

$('.dropdown-menu li').on('click', function() {
  var $dropdown = $('.dropdown-toggle');
  var text = $(this).text();
  var $span = $dropdown.find('span');
  
  $dropdown.html(dropdownTextTemplate.replace('{0}', text));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group">
  <button type="button" class="form-control btn btn-default dropdown-toggle" data-toggle="dropdown">
    Select Business type <span class="caret"></span>
</button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">small</a></li>
    <li><a href="#">medium</a></li>
    <li><a href="#">large</a></li>
  </ul>