Bootstrap 3：选择下拉项时如何生成新块？答案

【问题标题】：Bootstrap 3: how to generate a new block when a dropdown item is selected?Bootstrap 3：选择下拉项时如何生成新块？
【发布时间】：2017-04-07 06:53:17
【问题描述】：

我在 Rails 3 上使用 Bootstrap 3（Haml == HTML && Coffee == JS），而且我是 JavaScript 的新手。

我正在寻找使用 Bootstrap 的下拉菜单，因为当我单击 li>a 时，我希望它生成一个新块，其中包含与所列货币相关的金额。

Bootstrap 下拉菜单如下所示：

<div class="dropdown currencies">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Select a currency
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu currencies-list" aria-labelledby="dropdownMenu1">
        <li class="euro"><a href="#">Price in €</a></li>
        <li class="dollar"><a href="#">Price in $</a></li>
        <li class="pound"><a href="#">Price in £</a></li>
    </ul>
</div>

以下是金额列表的样子：

<ul class="prices-list">
    <li class="euro">6.50€</li>
    <li class="dollar">$4.96</li>
    <li class="pound">£5.58</li>
</ul>

我应该如何链接这些价格，以便它们仅在选择 Bootstrap 下拉菜单的关联 li>a 时出现？（我的意思是，如果在下拉菜单中选择了“以欧元计价”，则仅显示 - 以欧元计的金额/价格。）

另外，我希望默认选择并显示 $ 金额。

我认为这是微不足道的，但是我已经用谷歌搜索了一个小时的问题，但没有找到任何东西......

如果您愿意，请不要犹豫在 Haml*Coffee 中回答，非常感谢您！

【问题讨论】：

标签： javascript jquery twitter-bootstrap coffeescript dropdown

【解决方案1】：

做一些简单的隐藏/显示

$('.currencies-list a').click(function(){
 var class = $(this).parent().attr('class');//get the class of the currency selected
 $('.prices-list').find('li').hide();//hide all prices 
 $('.prices-list').find('li.'+class).show();//show only the price for the selected currency 
})

【讨论】：