引導3：如何選擇下拉項目時生成新塊？

Question

我使用on Rails的3自舉3（Haml的== HTML & &咖啡== JS），我寧願在JavaScript中的新手。

我正在尋找使用引導程序的下拉菜單中，因爲當我點擊一個LI>一，我想它生成一個新的塊，關聯列出的貨幣量。

引導程序下拉列表如下：

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

我應該如何連接這些價格對他們來說只出現在引導程序下拉菜單的關聯li> a是否被選中？ （我的意思是，如果在下拉菜單中選擇「Price in€」，則僅顯示 - 金額/價格，單位爲歐元。）

另外，我希望默認情況下選擇並顯示$金額。

我認爲這是小事，但我GOOGLE了我的問題了一個小時，沒有發現什麼...

不要猶豫，如果你喜歡在Haml的*咖啡回答，非常感謝你提前！

Answer 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 
})