从下拉引导程序中选择的选项

Question

我使用Bootstrap和RAILS。我的目标是：

1. 构建“bootstraped”下拉列表
2. 在<p>，<div>或<span>
中显示选择项目

JavaScript看起来像：

$(function(){
    $(".dropdown-menu li a").click(function(){
      $("#chosen").text($(this).text());      
   });
});

和HTML：

<div class="container">        
  <h2>Choose</h2>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">szablony
    <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>

问题是，选择选项后，<p id="chosen">中的所选文字只会暂时显示。

Answer 1

试试这个html：

<div class="container">        
  <h2>Choose</h2>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">szablony
    <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="javascript:void();">
                    <%= book.name %>
                </a>
            </li>
        <% end %>              
    </ul>
  </div>      
  <p id="chosen"></p>      
</div>