单击下拉菜单 link，在按钮中显示选定的文本

Question

我正在使用 Foundation: Dropdown buttons 并想稍微调整一下它的工作方式。

在我下面的示例中，当单击下拉列表中的 link 时，是否可以在按钮中显示 link 的文本？

例如，单击 "yet another" 后，按钮文本将显示为 "Order list by: yet another"。

<button href="#" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="button dropdown">Order list by: </button><br>
<ul id="drop1" data-dropdown-content class="f-dropdown" aria-hidden="true">
    <li><a href="#">This is a link</a></li>
    <li><a href="#">This is another</a></li>
    <li><a href="#">Yet another</a></li>
</ul>

Answer 1

你说下拉，但显示的是无序列表。无论哪种方式，您都可以使用 jquery 来完成此操作。此外，在您的按钮内添加一个跨度以在其中附加文本。

Fiddle: https://jsfiddle.net/cshanno/rvkhwpn5/1/

JS

$('li').on('click', function(){
    $('button span').text($(this).text());
});

Answer 2

要保留原始文本，您需要在按钮内创建一个内联跨度元素

<button href="#" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="button dropdown">Order list by: <span id="orderBy"></div></button><br>

$("li a").on("click", function() {
    $("button #orderBy").text($(this).text());
});

http://jsfiddle.net/jmyem32r/3/

单击下拉菜单 link，在按钮中显示选定的文本

On clicking dropdown link, show selected text in button

jquery

zurb-foundation