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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

改变这个：

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

到

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

再试一次。

说明：当您使用$(".btn").text($(this).text());时，表示您正在选择所有按钮，但您只需选择相关按钮本身，因此yiu必须使用{{1}遍历函数以获得正确的按钮。

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

2 个答案: