如何检测单击了哪个下拉菜单？

Question

对于每个下拉列表，我都有2个此HTML块：

 //And this JS code: $( document.body ).on( 'click', '.dropdown-menu li', function( event ) { var $target = $( event.currentTarget ); $target.closest( '.btn-group' ) .find( '[data-bind="label2"]' ).text( $target.text() ) .end() .children( '.dropdown-toggle' ).dropdown( 'toggle' ); return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel-body"> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span data-bind="label">Select One</span>&nbsp;<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Another item</a></li> </ul> </div> </div> 

问题是，我不知道选择了哪个下拉菜单。 有什么解决方案可以区分哪个下拉值被更改，第一个还是第二个？

Answer 1

是的，有一些：

我喜欢d获取索引，并对其进行处理，并由此获取任何内容。

 var _index = 0;
    $( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
_index =$(this).index();

    return false;
    });

您可以随时返回：

var selected = $('.dropdown-menu li:eq('+_index+')');

并得到什么togle

$target.closest( '.btn-group' )
    .find( '[data-bind="label2"]' ).text( $target.text() )
    .end()
    .children( '.dropdown-menu li:eq('+_index+')' ).dropdown( 'toggle' );