JQuery Selector not selecting anything.

Question

I have some 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>

and this small js function which I am using to attempt to select this drop down menu and apply a key listener to. However I am having trouble getting this code below

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

to run when the drop down is shown (clicked in this case). Do I need to wrap in this in an event listener listening for clicks? I have actually already tried this method but still could not get it to display this message or react in any way when the user clicked on the drop down. Based on what I have seen when I ran through this in the debugger, It never resolves the class selector, but this is just a guess. Is there something glaringly obvious I am missing or some weird bootstrap rule when using selectors?

Also I apologize if I am not giving enough info I am relatively new to this and am unsure of what is going on entirely.

`select` is a native HTML dropdown that doesn't have anything to do with the bootstrap dropdown that is built with `ul` and `li` elements plus some added styling. When bootstrap is creating a dropdown menu from html elements, they fire listeners at key times. But if you're using select, then you're relying on the browser to trigger events. It's tricky to get an onOpen event for a select element, but you can see [this question](http://stackoverflow.com/q/2709474/1366033). — KyleMit, Mar 27 '15 at 19:06
@KyleMit If this is the case then what exactly is that data-toggle attribute doing? I was under the impression that that particular attribute was only used for the bootstrap drop down menu and as such denoted you were using one. **edit:** I should point out that I did not write that attribute in, it was already there and I am simply editing it. — user2754048, Mar 27 '15 at 19:23

score 4 · Answer 1 · edited May 23 '17 at 12:06

See here for an answer: Process for using show.bs.dropdown in Bootstrap

Basically, the event is handled by the parent of the drop-down, not the drop-down itself. Also, BootStrap dropdowns are usually <ul>s. Here's an example of a standard drop-down with a handler:

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!');
});

you should give some examples, not just pointing out to external links :) — dippas, Mar 27 '15 at 19:03

score 1 · Answer 2 · answered Mar 27 '15 at 19:00

I think the events fire on the parent.So it should be the element above the .dropdown.So your code should be

    <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 not selecting anything.

2 Answers2