如何攔截bootstrap-hover-dropdown選項？

Question

我想攔截從下拉菜單中選擇的選項。這個菜單是用https://github.com/CWSpear/bootstrap-hover-dropdown製作的，但是這當然不會改變基礎。 我的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元素，你可以標記你的菜單如下：

<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()); 
    }); 
});