我将 Bootstrap 与 RAILS 一起使用。我的目标是:
- 构建“Bootstrap ”下拉列表
- 显示
<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">
中选择了文本仅出现一瞬间。
最佳答案
在你的 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>
关于javascript - 从下拉 Bootstrap 中选择的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44135897/