Question

如何在文本“排序依据”中附加dropdowm菜单项的值？

我想在按钮文本中显示如下内容：

根据选中的下拉菜单，按最高的赞成票排序或按以下字母排序：按字母排序。

       <div class="btn-group float-right">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span>Sorted By</span>
            </button>
            <div class="dropdown-menu item-sorted" aria-labelledby="dropdownMenuLink">
                <a class="dropdown-item" href="#" id="datesort" name='thumbsUp'>Highest positive votes</a>
                <a class="dropdown-item" href="#" id="datesort" name='thumbsDown'>Highest negative votes</a>
                <a class="dropdown-item" href="#" id="datesort" name='comments'>Highest comments</a>
                <a class="dropdown-item" href="#" id="datesort" name='alphabetic'>Alphabetic</a>
            </div>
        </div>

Answer 1

例如，如果所选的下拉选项由null属性标记，则可以像这样获得它：

selected="true"

请记住，这不会在事件点击时触发。要在事件上执行此操作，请单击：

$("#dropdownMenuButton span").html("Sorted By " + $('dropdown-menu[aria-labelledby="dropdownMenuLink"] a.dropdown-item[selected="true"]').text());

这会将侦听器附加到类$("div.dropdown-menu a.dropdown-item").click(function(e){ $("#dropdownMenuButton span").html("Sorted By " + $(this).text()); // gets the selection text and puts it in the button $(this).parent().find("a.dropdown-item[selected=true]").attr("selected", null); // unselects previous selections $(this).attr("selected", "true"); // selects the current one });的所有锚元素，这些锚元素是具有dropdown-item类的任何div的子级。

Answer 2

用jquery这样的东西：

$('.dropdown-menu a').onClick(function () {
    var text = $(this).text();
    $('#dropdownMenuButton span').text( "Sorted By: " + text);
});

Answer 3

您可以执行以下操作。您需要做的就是向您的html中添加一个类为0=1|x的跨度，并在jquery的这一小部分中进行检查，以检查您何时单击下拉菜单，并将上述元素文本添加到按钮中：

.option

$('.dropdown-item').click(function() { // When dropdown is clicked:
  $(".option").text($(this).text());
});

Answer 4

您可以尝试关注

添加将显示按文本排序的元素
添加点击事件监听器

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="btn-group float-right">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Sorted By <span class="option"></span></span>
  </button>
  <div class="dropdown-menu item-sorted" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#" id="datesort" name='thumbsUp'>Highest positive votes</a><br/>
    <a class="dropdown-item" href="#" id="datesort" name='thumbsDown'>Highest negative votes</a><br />
    <a class="dropdown-item" href="#" id="datesort" name='comments'>Highest comments</a><br />
    <a class="dropdown-item" href="#" id="datesort" name='alphabetic'>Alphabetic</a>
  </div>
</div>

document.querySelectorAll(".dropdown-item").forEach((el) => {
  el.onclick = (ev) => document.getElementById("sorted-by").textContent = ev.currentTarget.textContent;
});

如何在按钮文本中添加下拉项文本

4 个答案: