javascript - 从下拉 Bootstrap 中选择的选项

Question

我将 Bootstrap 与 RAILS 一起使用。我的目标是:

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