javascript - 如何在按钮文本中附加下拉项文本

Question

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

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

排序方式:最高赞成票或排序方式:字母根据所选的下拉项目。

       <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

例如，如果选定的下拉选项由 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 类的所有 anchor 元素，这些元素是具有 dropdown-menu 类的任何 div 的子元素。