Bootstrap 3: как сгенерировать новый блок при выборе выпадающего элемента?

Question

Я использую Bootstrap 3 на Rails 3 (Haml == HTML & & Coffee == JS), и я скорее новичок в JavaScript.

Я ищу, используя раскрывающееся меню Bootstrap, поскольку, когда я нажимаю на li> a, я хотел бы, чтобы он сгенерировал новый блок с суммой, связанной с указанной валютой.

бутстрапом выпадающий выглядит следующим образом:

<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 из раскрывающегося меню Bootstrap? (Я имею в виду, если в раскрывающемся списке выбрана «Цена в €»), то есть сумма/цена в €.)

Кроме того, я бы хотел, чтобы сумма была выбрана и отображена по умолчанию.

Я думаю, что это тривиально, однако я гугле мой вопрос в течение часа, не находя ничего ...

Не стесняйтесь ответить на 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 
})