選擇引導下拉列表與jQuery不起作用

Question

我有一個twitter-bootstrap select ，我試圖用jquery進行迭代以構建google-maps標記列表（緯度/經度/ building-id與列表一起存儲）。 准備好文檔后，我想遍歷列表並從每個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));
    });
});