title: bootstrap dropdown select default value not working
body: <p>i m using bootstrap dropdown menu</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".dropdown-menu li a").on('click',function(){
      var selText = $(this).text();
      $(this).parents('.dropdown').find('.dropdown-toggle').html(selText+' &lt;span class="caret"&gt;&lt;/span&gt;');
      $(".default_option").remove();
      $(".dropdown-menu").prepend("&lt;li class='default_option'&gt;&lt;a&gt;Kies behandeling&lt;/a&gt;&lt;/li&gt;");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#treatment-modal .caret {
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: 2px;
      vertical-align: middle;
      border-top: 4px dashed;
      border-top: 4px solid\9;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
  }
  #treatment-modal .dropdown-menu&gt;li&gt;a {
      display: inline-block;
      padding: 12px;
      clear: both;
      font-weight: 400;
      line-height: 1;
      color: #333;
      white-space: nowrap;
      width: 100%;
      cursor: pointer;
  }
  #treatment-modal .dropdown-menu li {
      margin: 0;
      padding: 0;
      line-height: 0;
  }
  #treatment-modal button.btn.btn-default.dropdown-toggle {
      margin: 5px 0 0;
      text-align: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div id="treatment-modal"&gt;
     &lt;div class="dropdown"&gt;
        &lt;button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"&gt;Kies behandeling&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
        &lt;ul class="dropdown-menu treatment-select"&gt;
           &lt;li&gt;
              &lt;a value="37"&gt;&lt;span class="pull-left"&gt;hair wash and treatment (60min)&lt;/span&gt;&lt;span class="pull-right"&gt;€30.00&lt;/span&gt;&lt;/a&gt;
           &lt;/li&gt;
        &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When i m trying to select option it is working properly and showing me as replacement of the text of drop-down LIKE <strong>CONVENTIONAL SELECT DROP-DOWN</strong></p>
  
  <p><strong>But</strong> when i try to prepend some value in dropdown than i click on that prepended value at that time default selection not working. </p>
  
  <p>Looking for Help.</p>