Question

以下是我的下拉菜单。

我希望如此，当用户点击下拉列表中的某个项目时，文本会从默认值更改为他们选择的内容。

                    <div class="btn-group" role="group">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                            {% trans %} area {% endtrans %}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu pull-right" role="menu">
                            {% for name in areaNames %}
                            <li><a href="#">{{ name }}</a></li>
                            {% endfor %}
                        </ul>
                    </div>

                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                            {% trans %} user {% endtrans %}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu pull-right" role="menu">
                            {% for name in userNames %}
                                <li><a href="#">{{ name }}</a></li>
                            {% endfor %}
                        </ul>
                    </div>

                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                            {% trans %} range {% endtrans %}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu pull-right" role="menu">
                            <li><a href="#">{% trans %} last.week {% endtrans %}</a></li>
                            <li><a href="#">{% trans %} last.month {% endtrans %}</a></li>
                            <li><a href="#">{% trans %} last.quarter {% endtrans %}</a></li>
                            <li><a href="#">{% trans %} last.year {% endtrans %}</a></li>
                        </ul>
                    </div>
                </div>

我正在使用这个jQuery，但每当有人点击某些内容时，它会更新所有三个下拉列表中的文本。我只是想让它更新他们选择的一个下拉列表。

$(".dropdown-menu").on('click', 'li a', function(){
    $(".btn:first-child").text($(this).text());
    $(".btn:first-child").val($(this).text());
});

我该怎么做？

Answer 1

这就是你想要的。

var menus = $(".dropdown-menu");
menus.on('click', 'li a', function(el) { 

  var clickedElement = $(el.currentTarget);
  var updateText = clickedElement.text();
  var updateElement = $(el.currentTarget).closest(".btn-group").find('.btn'); 

  updateElement.text(updateText);
  updateElement.val(updateText);

});

Answer 2

这非常公平，因为它也会增加跨度。

$(function () {
   $(".dropdown-menu").on('click', 'li > a', function(){
   $this = $(this);
   var p = $this.parent().parent().prev();
   p.text($(this).text());
   p.append(' <span class="caret"></span>');
   });
 });

使用jquery更新bootstrap中的下拉文本

2 个答案: