使用 Javascript 从 Bootstrap Drop 获取所有值

Get all values from Bootstrap Dropdown using Javascript

本文关键字：获取 Drop Javascript Bootstrap 使用      更新时间：2023-09-26

我正在尝试使用 JavaScript 函数获取引导下拉菜单中的所有值。当我选择某些内容时，我会设法保留选择。尽管如此，与具有 <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>

这对你来说应该很好。

$('#dropdown-menu li').on('click', function(){
  $("#dropdown-menu li").each(function(){
    console.log($(this).text()); //do anything with the values
  });
});
相关文章：