title: Replace Dropdown Button Text With Selected Dropdown Text
body: <p>I know this has been asked before - one answer led me to this <a href="http://jsfiddle.net/tuiaverde/vsfsap8m/" rel="nofollow noreferrer">JSFiddle</a>, which is what I want, but it doesn't work in my navbar. The selected dropdown text doesn't replace the dropdown button (Categories). If someone could please point out what I'm doing wrong? Thank you!</p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$('.dropdown-select').on( 'click', '.dropdown-menu li a', function() { 
     var target = $(this).html();
  
     //Adds active class to selected item
     $(this).parents('.dropdown-menu').find('li').removeClass('active');
     $(this).parent('li').addClass('active');
  
     //Displays selected text on dropdown-toggle button
     $(this).parents('.dropdown-select').find('.dropdown-toggle').html(target + ' &lt;span class="caret"&gt;&lt;/span&gt;');
  });
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;template name="header"&gt;
    &lt;nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
        &lt;div class="container-fluid"&gt;
            &lt;div class="navbar-header"&gt;
                &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;                        
                &lt;/button&gt;
                &lt;a class="navbar-brand" href="/"&gt;REVUME&lt;/a&gt;
            &lt;/div&gt;
              &lt;ul class="nav navbar-nav"&gt;
                &lt;li class="home"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dropdown dropdown-select"&gt;
                      &lt;a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true" href="#"&gt;CATEGORIES &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="digital_art"&gt;DIGITAL ART&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="drawing"&gt;DRAWING&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="graphic_design"&gt;GRAPHIC DESIGN&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="illustration"&gt;ILLUSTRATION&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="painting"&gt;PAINTING&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="photography"&gt;PHOTOGRAPHY&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="ui_ux"&gt;UI/UX&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt; 
              &lt;/ul&gt;            
                &lt;ul class="nav navbar-nav navbar-right"&gt; 
                  {{&gt; loginButtons align="right"}}
                &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/template&gt;
  </code></pre>