引導下拉列表添加選中圖標的子菜單

Question

我有以下的自舉下拉菜單：

http://jsfiddle.net/bs5rc6k3/

我如何添加一個圖標來選擇的下拉菜單選項並將其設置爲selected？當點擊一個新選項時，該選項將被選中。

的圖標是該字體-真棒之一：<i class="fa fa-check"></i>

Answer 1

喜歡this demo

JS：

$('#myDropdown > li > a').click(function(e){ 
    $('#myDropdown > li > a').removeClass('selected'); 
    $(this).addClass('selected'); 
}); 

CSS（以隱藏檢查，除非它是一個 '選擇' 元素內）：

#myDropdown > li > a > .fa{ 
    visibility:hidden; 
} 
#myDropdown > li > a.selected > .fa{ 
    visibility:visible; 
} 

HTML：

<div class="input-group-btn"> 
    <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> 
     <span class="sr-only">Toggle Dropdown</span> 
    </button> 
    <!-- added an ID for the javascript --> 
    <ul id="myDropdown" class="dropdown-menu" role="menu"> 
     <li> 
      <a href="#"> 
       <i class="fa fa-check"></i> 
       <span class="search-option">Option 1</span> 
      </a> 
     </li> 
     <li> 
      <a href="#"> 
        <i class="fa fa-check "></i> 
        <span class="search-option">Option 2</span> 
      </a> 
     </li> 
    </ul> 
</div>