选择bootstrap下拉，jquery无法正常工作

Question

我有twitter-bootstrap select我试图用jquery迭代来构建google-maps标记列表（纬度/经度/建筑物ID与列表一起存储）。准备好文档我想迭代列表并从每个li项中提取lat / long并创建一个包含该位置的标记：

        <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>

这是代码生成的代码在浏览器中的样子：

我可以为每个菜单项成功附加一个onclick，但我似乎无法通过jquery迭代select列表。

到目前为止，我已经尝试过这个：

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

但它似乎没什么打击。但是，此代码适用于添加单击侦听器：

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

修改 这是我的jquery使用此代码找到的内容：

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

它只获取整个文档而不是列表元素

Answer 1

您的加价不会加起来。看起来有些东西会在浏览器上改变你的标记，因为你的选择只有.dropdown-menu.inner.selectpicker，因为你的标记在点击浏览器之前只显示了类selectpicker：

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

如果您有多个selectpicker类，请使用ID：

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