I am utilizing Bootstrap in combination with RAILS. My main objective is:
- create a dropdown list with Bootstrap styling
- show the selected item in
<p>,<div>, or<span>
The JavaScript code appears as follows:
$(function(){
$(".dropdown-menu li a").click(function(){
$("#chosen").text($(this).text());
});
});
Here is the corresponding HTML:
<div class="container">
<h2>Choose</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Templates
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<% @books.each do |book| %>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
<%= book.name %>
</a>
</li>
<% end %>
</ul>
</div>
<p id="chosen"></p>
</div>
The issue I am facing is that once an option is selected, the text displayed in <p id="chosen"> only appears briefly before disappearing.