使用.on的多个下拉菜单选择文本仅适用于第一个下拉菜单

Multiple Dropdowns Menu Selection text using .on works only on first dropdown

本文关键字：下拉菜单 文本 适用于 第一个 选择 使用 on      更新时间：2023-09-26

我的问题是从引导程序下拉列表中选择一个li元素并将其显示在下拉框中。当我尝试时，它只更改第一个下拉列表中的文本，第二个下拉事件不起作用。

<div class="dropdown">
 <button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span></button>
<ul class="dropdown-menu scrollbar" aria-labelledby="dropdownMenu1">
                                <li class="dropdown-header">Generic</li>
                                <li><a id="num">Number</a></li>
                                <li><a id="float">Float</a></li>
                                <li><a>Boolean</a></li>
                                <li><a>Character</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Geographical</li>
                                <li><a>Zip Code</a></li>
                                <li><a>City</a></li>
                                <li><a>Region</a></li>
                                <li><a>Countries</a></li>
                                <li><a>Latitude/Longitude</a></li>
</ul>
<div>
<div class="dropdown">
 <button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span></button>
                            <ul class="dropdown-menu scrollbar" aria-labelledby="dropdownMenu2" >
                                <li class="dropdown-header">Generic</li>
                                <li><a id="num">Number</a></li>
                                <li><a id="float">Float</a></li>
                                <li><a>Boolean</a></li>
                                <li><a>Character</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Geographical</li>
                                <li><a>Zip Code</a></li>
                                <li><a>City</a></li>
                                <li><a>Region</a></li>
                                <li><a>Countries</a></li>
                                <li><a>Latitude/Longitude</a></li>
</ul>
<div>

对于这两个下拉菜单，我想在下面的元素中显示选择时的文本：

<button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span></button>

我使用jQuery进行选择和显示，但它只发生在第一个下拉菜单上。

$(".dropdown-menu li a").on("click",function(){
  $(".changetext").text($(this).text());
   )}

我希望它是你想要的

$(document).ready(function(){
  $(".dropdown-menu li a").on("click",function(){
  $(".changetext").text($(".changetext").text() + ' ' + $(this).text());
  });
});

结果：https://jsfiddle.net/cmedina/bLts45po/

$(function() {
  $("div.dropdown .dropdown-menu li a").on("click", function(event) {
    $(this).closest("div.dropdown").find("button").text($(this).text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span>
  </button>
  <ul class="dropdown-menu scrollbar" aria-labelledby="dropdownMenu1">
    <li class="dropdown-header">Generic</li>
    <li><a id="num">Number</a>
    </li>
    <li><a id="float">Float</a>
    </li>
    <li><a>Boolean</a>
    </li>
    <li><a>Character</a>
    </li>
    <li role="separator" class="divider"></li>
    <li class="dropdown-header">Geographical</li>
    <li><a>Zip Code</a>
    </li>
    <li><a>City</a>
    </li>
    <li><a>Region</a>
    </li>
    <li><a>Countries</a>
    </li>
    <li><a>Latitude/Longitude</a>
    </li>
  </ul>
</div>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span>
  </button>
  <ul class="dropdown-menu scrollbar" aria-labelledby="dropdownMenu2">
    <li class="dropdown-header">Generic</li>
    <li><a id="num">Number</a>
    </li>
    <li><a id="float">Float</a>
    </li>
    <li><a>Boolean</a>
    </li>
    <li><a>Character</a>
    </li>
    <li role="separator" class="divider"></li>
    <li class="dropdown-header">Geographical</li>
    <li><a>Zip Code</a>
    </li>
    <li><a>City</a>
    </li>
    <li><a>Region</a>
    </li>
    <li><a>Countries</a>
    </li>
    <li><a>Latitude/Longitude</a>
    </li>
  </ul>
</div>

该代码$(".dropdown-menu li a")的长度为18个元素

该代码$(".changetext")具有2个元素的长度

对于在任一下拉列表中单击的每一个a，您都在更改这两个按钮。确保这是您想要的行为，因为这就是JQuery代码正在做的事情。

您需要隔离单击的元素，以便对与下拉列表关联的按钮进行操作。

此代码将对所有$(".dropdown-menu li a")元素应用相同的单击函数，但将更改DOM 中最靠近单击元素的button的文本

$("div.dropdown .dropdown-menu li a").on("click", function(event) {
  $(this).closest("div.dropdown").find("button").text($(this).text());
});
相关文章：