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

Question

我有三个下拉菜单，我要在每个菜单上显示所选的项目。 但是，我的jQuery代码正在更改所有三个下拉菜单的选定项。 如果我在任何一个下拉菜单中单击一个项目，则所有三个项目都将更改为我选择的项目。 如何使它们分别显示自己选择的项目？

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

更改$(".btn").text($(this).text()); 到$(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

更改此：

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

至

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

然后再试一次。

说明：当您使用$(".btn").text($(this).text()); ，表示您正在选择所有按钮，但是您只需要选择关联的按钮本身，因此yiu必须使用DOM遍历功能来获取正确的按钮。