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

Question

我使用带有 RAILS 的 Bootstrap。我的目标是：

1. 构建“引导式”下拉列表
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>