EDIT1：

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中如何说明，'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/

修改
为了处理动态添加的元素，必须将点击处理程序添加到文档本身，因为在首次加载文档时菜单项不存在。这应该可以解决问题。

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

单击时更改引导下拉列表的颜色和文本

EDIT1：

1 个答案: