Question

我试图通过使用JavaScript函数获取Bootstrap下拉菜单中的所有值。当我选择一些东西时，我认为选择仍然存在。然而，与带有<select>和<option>的html下拉菜单不同，我能够获得用户可以选择的所有可能选项，我既没有在网上找到任何内容，也没有尝试和错误获取引导程序下拉菜单中的所有值。

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="dropdown-menu"> <!-- aria-labelledby="dropdownMenu1"> -->
{% for instance in leaderboardDictionaries %}
    {% for category, userDictionary in instance.items %}
        <li><a href="#">{{category}}</a></li>
    {% endfor %}
{% endfor %}
</ul>
</div>

在我的javascript函数中，我做的第一件事就是确保选择保持不变。然后我想得到所有可能的'选项'。但我的代码显然不对。

<script>
$(".dropdown-menu li").click(function(){
var selText = $(this).text();
$(this).parents('.dropdown').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
var availableOptions = $('.dropdown-menu li option');
alert(availableOptions[1]);
});
</script>

Answer 1

这应该适合你。

$('#dropdown-menu li').on('click', function(){

  $("#dropdown-menu li").each(function(){
    console.log($(this).text()); //do anything with the values
  });

});

使用Javascript从Bootstrap Dropdown获取所有值

1 个答案: