javascript - 选择 bootstrap 下拉菜单，jquery 不工作

Question

我有一个 twitter-bootstrap select，我正在尝试使用 jquery 进行迭代以构建一个 google-maps 标记列表(latitude/longitude/building-id is存储在列表中)。准备好文档后，我想迭代列表并从每个 li 项目中提取纬度/经度，并使用该位置创建一个标记:

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