更改颜色和文字的引导下拉单击

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}); 
     }); 
});