Question

我有一些HTML

 <select id="dropd" class="search-type" data-toggle="dropdown">
     <option value="">All</option>
     <option value="standards-and-publications">Standards</option>
     <option value="sedl-digital-library">Library</option>
 </select>

和我用来尝试选择此下拉菜单并应用密钥监听器的小js函数。但是我在下面的代码中遇到了问题

$('.search-type').on('show.bs.dropdown', function () {
     alert("I FINALLY FOUND YOU");
});

在显示下拉列表时运行（在这种情况下单击）。我是否需要在监听点击的事件监听器中包含此内容？我实际上已经尝试过这种方法，但仍无法显示此消息或在用户点击下拉列表时以任何方式做出反应。基于我在调试器中运行时看到的内容，它永远不会解析类选择器，但这只是猜测。在使用选择器时，是否有一些明显缺失的东西或一些奇怪的引导规则？

如果我没有提供足够的信息，我也很抱歉我对此比较陌生并且不确定到底发生了什么。

Answer 1

请点击此处获取答案：Process for using show.bs.dropdown in Bootstrap

基本上，事件由下拉列表的父级处理，而不是下拉列表本身。此外，BootStrap下拉列表通常为<ul>秒。以下是带有处理程序的标准下拉列表的示例：

HTML

<div class="btn-group" id="ddlWrap">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Menu
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <li><a href="#">Choice..</a></li>
  </ul>
</div>

JS

$('ddlWrap').on('show.bs.dropdown', function () {
    alert('Found the dropdown wrapper!');
});

Answer 2

我认为事件触发了父母。所以它应该是.dropdown之上的元素。所以你的代码应该是

    <div class="btn-group" id="myDropdown">
       <select id="dropd" class="search-type" data-toggle="dropdown">
         <option value="">All</option>
         <option value="standards-and-publications">Standards</option>
         <option value="sedl-digital-library">Library</option>
       </select>
    </div>

JQuery Selector没有选择任何东西。

2 个答案: