[英]Selecting bootstrap drop down with jquery not working
我有一个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");
它只是获取整个文档而不是列表元素
您的标记不累加。 看起来有些东西在您的浏览器上改变了您的标记,使您的选择具有.dropdown-menu.inner.selectpicker
类,因为标记在到达浏览器之前仅显示selectpicker
类:
<select id="buildings" class="selectpicker" ...>
如果您有多个selectpicker
类,请使用ID:
$(document).ready(function () {
$("#buildings li").each(function () {
alert($(this));
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.