title: Bootstrap dropdown not displaying selected value
body: <p>Working with latest Bootstrap 3.3.6 and jQuery library 1.11.3, I'm trying to have dropdown display the selected value when the user selects one of the options. So far it looks like the dropdown ul won't display at all. </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="dropdown"&gt;
    &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"&gt;
      Select One
      &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu" aria-labelledby="dropdownMenu"&gt;
      &lt;li&gt;&lt;a href="#" data-value="a"&gt;A&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-value="b"&gt;B&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>    $(".dropdown-menu li a").click(function() {
        $(this).parents(".dropdown").find('.btn').html($(this).text() + ' &lt;span class="caret"&gt;&lt;/span&gt;');
        $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
  });
  </code></pre>
  
  <p>I referred to this thread for a working JS function but no avail: <a href="https://stackoverflow.com/questions/13437446/how-to-display-selected-item-in-bootstrap-button-dropdown-title">How to Display Selected Item in Bootstrap Button Dropdown Title</a></p>
  
  <p>Current JSFiddle: <a href="https://jsfiddle.net/9xzqdry9/" rel="nofollow noreferrer">https://jsfiddle.net/9xzqdry9/</a></p>