點擊下拉鍊接，在按鈕中顯示選中的文本

Question

我使用的是Foundation: Dropdown buttons，並且想稍微調整它的工作方式。

在我下面的例子中，當點擊下拉鍊接時，是否可以在按鈕中顯示該鏈接的文本？

E g點擊「另一個」後，按鈕文本將顯示「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來實現這一點。另外，在你的按鈕中添加一個跨度以在其中添加文本。

小提琴：https://jsfiddle.net/cshanno/rvkhwpn5/1/

JS

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

Answer 2

要保持原來的文本，您需要在按鈕中創建一個內聯span元素

<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/