[英]Selecting bootstrap drop down with jquery not working
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). 我有一个
twitter-bootstrap select
,我试图用jquery进行迭代以构建google-maps
标记列表(纬度/经度/ building-id与列表一起存储)。 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: 准备好文档后,我想遍历列表并从每个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>
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. 我可以为每个菜单项成功附加一个onclick,但是我似乎无法通过jquery迭代
select
列表。
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: 编辑这是我的jquery使用以下代码找到的内容:
var test = $(".dropdown-menu.inner.selectpicker li");
It just gets the entire document instead of the list elements 它只是获取整个文档而不是列表元素
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
: 看起来有些东西在您的浏览器上改变了您的标记,使您的选择具有
.dropdown-menu.inner.selectpicker
类,因为标记在到达浏览器之前仅显示selectpicker
类:
<select id="buildings" class="selectpicker" ...>
Use the ID instead if you have multiple selectpicker
classes: 如果您有多个
selectpicker
类,请使用ID:
$(document).ready(function () {
$("#buildings li").each(function () {
alert($(this));
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.