Изменение цвета и текста раскрывающегося списка бутстрапов при нажатии

Question

У меня есть <li>, на котором я добавил раскрывающийся список бутстрапов. Внутри этого раскрывающегося списка у меня есть два варианта: <li> с разными идентификаторами и текстом. Я хочу иметь возможность изменить текст раскрывающегося списка, исходя из того, какой из двух вариантов выбран.

<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, «listItem» добавляется с использованием javascript-кода динамически, и количество вариантов в раскрывающемся списке будет варьироваться.

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/

EDIT
Чтобы справиться с динамически добавляемых элементов обработчик щелчка должен быть добавлен к самому документу, так как пункты меню не существует когда документ загружен первым. Это должно сделать трюк.

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