Question

我的问题是从bootstrap下拉列表中选择一个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());
   )}

Answer 1

我希望你想要的是什么

$(document).ready(function(){

  $(".dropdown-menu li a").on("click",function(){

  $(".changetext").text($(".changetext").text() + ' ' + $(this).text());

  });

});

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

Answer 2

$(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")元素应用相同的点击功能，但会更改距离点击最近的button的文字DOM中的元素

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

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

2 个答案: