JQuery 选择器没有选择任何东西。答案

【问题标题】：JQuery Selector not selecting anything.JQuery 选择器没有选择任何东西。
【发布时间】：2015-03-27 18:51:26
【问题描述】：

我有一些 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");
});

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

另外，如果我没有提供足够的信息，我对此表示歉意，因为我对此比较陌生，并且不确定到底发生了什么。

【问题讨论】：

你也可以试试change 事件
select 是一个原生 HTML 下拉菜单，它与使用 ul 和 li 元素以及一些附加样式构建的引导下拉菜单没有任何关系。当 bootstrap 从 html 元素创建下拉菜单时，它们会在关键时刻触发侦听器。但是，如果您使用的是 select，那么您将依赖浏览器来触发事件。为 select 元素获取 onOpen 事件很棘手，但您可以看到 this question。
@KyleMit 如果是这种情况，那么 data-toggle 属性到底在做什么？我的印象是该特定属性仅用于引导下拉菜单，因此表示您正在使用一个。 编辑：我应该指出我没有写那个属性，它已经在那里了，我只是在编辑它。

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

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

基本上，事件由下拉菜单的父级处理，而不是下拉菜单本身。此外，BootStrap 下拉菜单通常是 <ul>s。下面是一个带有处理程序的标准下拉示例：

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>

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

【讨论】：

你应该举一些例子，而不仅仅是指出外部链接:)
谢谢。添加了一个示例。

【解决方案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>

【讨论】：