Selecting bootstrap drop down with jquery not working

Question

I have a twitter-bootstrap select that I am trying to iterate with jquery to build a list of google-maps markers(latitude/longitude/building-id is stored with list). on document ready I want to iterate the list and extract the lat/long from each li item and create a marker with that location:

        <select id="buildings" class="selectpicker" data-width="100%" data-live-search="true"><!-- style="border-radius:0px;" -->
            {% for category in buildings %}
                <optgroup label="{{ category.category.asBuildingCategory }}">
                    {% for building in category.buildings %}
                        <option data-content="<span data-latitude='{{building.fLatitude}}' data-longitude='{{building.fLongitude}}' data-build-id='{{building.ixBuilding}}'>{{building.asBuildingName}}</span>"></option>
                    {% endfor %}
                </optgroup>
            {% endfor %}
        </select>

This is what the code generated looks like in the browser:

I can successfully attach an onclick for each menu item, but I can't seem to iterate the select list via jquery.

Thus far I have tried this:

$(document).ready(function () {
    $(".dropdown-menu.inner.selectpicker li").each(function () {
        alert($(this));
    });
});

but it doesn't seem to hit anything. However This code works for adding the click listener:

$(document.body).on('click', '.dropdown-menu.inner.selectpicker li', function () {
    debugger;
    var latitude = $(this).find("span").data('latitude');
    var longitude = $(this).find("span").data('longitude');
    var buildingID = $(this).find("span").data('build-id');
});

EDIT This is what my jquery finds using this code:

var test = $(".dropdown-menu.inner.selectpicker li");

It just gets the entire document instead of the list elements

Answer 1

Your markup doesn't add up. It looks like something mutates your markup on the browser for your select to have the classes .dropdown-menu.inner.selectpicker since your markup before it hits the browser only shows class selectpicker :

    <select id="buildings" class="selectpicker" ...>

Use the ID instead if you have multiple selectpicker classes:

$(document).ready(function () {
    $("#buildings li").each(function () {
        alert($(this));
    });
});