Question

我有内部wordpress页面的链接列表。我创建了bootstrap下拉列表，从给定列表中选择一个城市。但我需要更多。

这是我的fiddle。和代码

<div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdown" data-toggle="dropdown">
    -- choose your city --
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Surrey</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Langley</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Delta</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">White Rock</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Abbotsford</a></li>
     </ul>
</div>
<a class="btn btn-big btn-orange" href="#">City</a>

应该这样工作：

点击按钮＆＃34;选择你所在的城市＆＃34;
列表出现
点击所选城市 - 所选城市名称的按钮标题更改
href正在复制到名为City的列表下的按钮。

有什么想法吗？

Answer 1

为您的<ul>和<a>提供一个ID，以便引用它们，然后添加一个jquery匿名函数来更新您的按钮文字并且＆＃39; href＆＃39;值。

$("#list").click( function(e) {
     $("#dropdown").text($(e.target).text());
     $("#link").attr('href', $(e.target).text())
});

这是我的fiddle。

带有选定网址的附加按钮的Bootstrap下拉列表

1 个答案: