Update dropdown text in bootstrap with jquery

Question

these are my dropdown menus below.

I want it so when a user clicks an item in the dropdown, the text changes from the default to whatever it is that they selected.

                    <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>

I am using this jQuery, but whenever someone clicks something it updates the text on ALL THREE dropdowns. I just want it to update the one dropdown that they selected from.

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

How can I do this?

there are 2 ways doing this task.1, provide classname for each dropdown menu and write 4 jquery functions and resolve the issue. and solution 2. is to collect $.each all dropdown group on change of any of the thing you need to update — Nadeemmnn Mohd
– Nadeemmnn Mohd, Commented Feb 17, 2015 at 5:35

OpenSorceress · Accepted Answer · 2015-02-17 06:20:15Z

2

This does what you want.

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

});

answered Feb 17, 2015 at 6:20

OpenSorceress

2,00416 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ravimallya · Accepted Answer · 2015-02-17 07:37:10Z

1

This is pretty fair enough as it will add span also.

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

answered Feb 17, 2015 at 7:37

Ravimallya

6,6202 gold badges44 silver badges76 bronze badges

Collectives™ on Stack Overflow

Update dropdown text in bootstrap with jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related