更改顏色和文字的引導下拉單擊

Question

我有一個<li>我已經添加了引導下拉列表。在這個下拉列表中，我有兩個選項<li>，其中包含不同的ID和文本。我希望能夠根據選擇的兩個選項中的哪一個來更改下拉列表的文本。

<ul> 
    <li class="listItem"> 
    <h5>Item Header</h5> 
    <div class='dropdown'> 
     <button id='flagchoice' class='btn btn-default dropdown-toggle' type='button' data-toggle='dropdown'>Category<span class='caret'></span></button> 
     <ul class='dropdown-menu dropdown-menu-right'> 
     <li id='choice1'>Choice 1</li> 
     <li id='choice2'>Choice 2</li> 
     </ul> 
    </div> 
    </li> 
</ul> 

我已經創建了這個JSFiddle來說明我在說什麼。

我想使用所選下拉選項的文本，顏色和背景顏色。

我試着用這一點，我已經在一個下拉的另一種情況類似使用，但它不能在這種情況下工作：

$(".dropdown-menu li#choice1").click(function(){ 
    $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>'); 
    $(this).parents(".dropdown").find('.btn').val($(this).data('value')); 
}); 

$(".dropdown-menu li#choice2").click(function(){ 
    $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>'); 
    $(this).parents(".dropdown").find('.btn').val($(this).data('value')); 
}); 

EDIT1：

我想我忘了提及類似於我的JSFiddle中的說明，動態地使用javascript代碼添加'listItem'，並且下拉列表中的選項數量會有所不同。

Answer 1

你的jQuery代碼適合我。我已經修改了一下，以避免有兩個點擊處理程序，但隨時可以恢復它。

$(document).ready(function() { 
     $(".dropdown-menu li").click(function(){ 
      var color = $(this).css("color"); 
      var bgColor = $(this).css("background-color"); 
      var parent = $(this).parents(".dropdown").find('.dropdown-toggle'); 
      parent.html($(this).text() + ' <span class="caret"></span>'); 
      parent.val($(this).data('value')); 
      parent.css({"background-color" : bgColor, "color" : color}); 
     }); 

}); 

這裏是我的jsfiddle創建
https://jsfiddle.net/q79fpua4/2/

編輯
對付動態添加元素單擊處理從此菜單項被添加到文件本身不存在當文檔第一次加載時。這應該做的伎倆。

$(document).ready(function() { 
     $(document).on("click", ".dropdown-menu li", function(){ 
      var color = $(this).css("color"); 
      var bgColor = $(this).css("background-color"); 
      var parent = $(this).parents(".dropdown").find('.dropdown-toggle'); 
      parent.html($(this).text() + ' <span class="caret"></span>'); 
      parent.val($(this).data('value')); 
      parent.css({"background-color" : bgColor, "color" : color}); 
     }); 
});