如何在表单中的多个选择类型下拉菜单中使用jQuery脚本？

Question

I have three dropdown menus which I want to display the selected item on the button for each. However, my jQuery code is changing the selected item for all three dropdowns. If I click on one item in any of the dropdowns, all three change to the item I've selected. How do I make it so they display their own selected items separately?

HTML

           <div class="form-inline">
                <div class="form-group">
                    <button type="button" id="vegetype" name="vegetype" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All vege types <i class="fa fa-angle-down" aria-hidden="true"></i></button>
                    <ul class="dropdown-menu">
                        <li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">All</label></li>
                        <li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">Brocolli</label></li>
                        <li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">Cucumber</label></li>
                        <li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">Kale</label></li>
                        <li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">Carrot</label></li>
                    </ul>
                </div><!-- end form-group -->

                <div class="form-group">
                    <button type="button" id="fruits" name="fruits" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Fruits <i class="fa fa-angle-down" aria-hidden="true"></i></button>
                    <ul class="dropdown-menu">
                        <li class="dropdown-item">Apple</li>
                        <li class="dropdown-item">Orange</li>
                        <li class="dropdown-item">Banana</li>
                    </ul>
                </div><!-- end form-group -->

                <div class="form-group">
                    <button type="button" id="max_num" name="max_num" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Number <i class="fa fa-angle-down" aria-hidden="true"></i></button>
                    <ul class="dropdown-menu">
                        <li class="dropdown-item">1</li>
                        <li class="dropdown-item">2</li>
                        <li class="dropdown-item">3</li>
                        <li class="dropdown-item">4</li>
                    </ul>
                </div><!-- end form-group -->
            </div>

JS

$(document).ready(function(){
  $(".dropdown-menu li").click(function(){
    $(".btn").text($(this).text());
  });

});

Answer 1

Change $(".btn").text($(this).text()); To $(this).parent().siblings('.btn').text($(this).text());

 $(document).ready(function(){ $(".dropdown-menu li").click(function(){ $(this).parent().siblings('.btn').text($(this).text()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-inline"> <div class="form-group"> <button type="button" id="vegetype" name="vegetype" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All vege types <i class="fa fa-angle-down" aria-hidden="true"></i></button> <ul class="dropdown-menu"> <li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">All</label></li> <li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">Brocolli</label></li> <li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">Cucumber</label></li> <li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">Kale</label></li> <li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">Carrot</label></li> </ul> </div><!-- end form-group --> <div class="form-group"> <button type="button" id="fruits" name="fruits" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Fruits <i class="fa fa-angle-down" aria-hidden="true"></i></button> <ul class="dropdown-menu"> <li class="dropdown-item">Apple</li> <li class="dropdown-item">Orange</li> <li class="dropdown-item">Banana</li> </ul> </div><!-- end form-group --> <div class="form-group"> <button type="button" id="max_num" name="max_num" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Number <i class="fa fa-angle-down" aria-hidden="true"></i></button> <ul class="dropdown-menu"> <li class="dropdown-item">1</li> <li class="dropdown-item">2</li> <li class="dropdown-item">3</li> <li class="dropdown-item">4</li> </ul> </div><!-- end form-group --> </div> 

Answer 2

Change this:

$(".btn").text($(this).text());

to

$(this).closest(".btn").text($(this).text());

and try again.

Explanation: When you are using $(".btn").text($(this).text()); , means you are selecting all the buttons, but you have to select only the associated button itself, so yiu have to use DOM traversing function to get the right button.