javascript - 如何拦截 bootstrap-hover-dropdown 选择？

Question

我想拦截从下拉菜单中做出的选择。这个菜单是用 https://github.com/CWSpear/bootstrap-hover-dropdown 制作的但这肯定不会改 rebase 本原理。 我的 HTML 代码是:

<div class="row">
    <div class="col-md-5">
        <div class="form-group text">
            <label class=" control-label" for="comment">Comment :</label>
            <div class="input-group">
                <input type="text" name="comment" class="form-control " placeholder="Free comment" id="" value="" /> 
                <span class="input-group-btn">
                    <button class="btn btn-success add_language dropdown-toggle"
                        id="add_language-1"
                        title="Add a language"
                        data-toggle="dropdown"
                        data-hover="dropdown"> <i class="fa fa-plus"></i><span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" id="dropdown-menu">
                        <li><a tabindex="1">English</a></li>
                        <li><a tabindex="2">Spanish</a></li>
                        <li><a tabindex="3">German</a></li>
                    </ul>
                </span>
            </div>
        </div>
    </div>
</div>

这是我想出的拦截选择的方法，但这不起作用，更准确地说，我实际上对 tabindex 的值感兴趣:

$( document ).ready(function($) {
    $('.dropdown-toggle').dropdownHover();

    $('.dropdown-menu').on('click', function(event){
        event.preventDefault();
        var value = $('#dropdown-menu').selected();
        alert(value);
    });
}

事实上 onclick 甚至没有被调用。 我在这里犯了什么错误？ 这里是对应的jsFiddle

Answer 1

如果您同意选择元素，您可以像这样标记菜单:

<select class="dropdown-menu" multiple>
  <option value="1">English</option>
  <option value="2">Spanish</option>
  <option value="3">German</option>
</select>

然后使用 jQuery's val() 提取该值方法。

$(document).ready(function() {
  $('.dropdown-menu').on('click', function(event){
    event.preventDefault();
    console.log($('.dropdown-menu').val());
  }); 
});