jquery - Bootstrap 一次获取两个下拉列表的值

Question

我正在使用两个 Bootstrap 下拉列表。我想同时获取两个下拉列表的值。

我的 html，

<div class="btn-group  col-sm-5 col-xs-5 col-md-5 cgclry country" style="padding:3px 3px;"> 
    <a class="btn btn-default dropdown-toggle btn-select2" data-toggle="dropdown" href="#" style="border:0;">All Country<span class="caret"></span></a>
    <ul class="dropdown-menu countries">
        <li><a href="#" data-id="USA" id="usa">USA</a></li>
        <li><a href="#" data-id="Australia" id="aus">Australia</a></li>
        <li ><a href="#" data-id="INDIA" id="ind">INDIA</a></li>                        
    </ul>
</div>

<div class="btn-group col-sm-5  col-xs-5 col-md-5 " style="padding:3px 3px 3px 3px;"> 
    <a class="btn btn-default dropdown-toggle btn-select"    data-toggle="dropdown" href="#" style="border:none;">All Category<span class="caret"></span></a>
    <ul class="dropdown-menu category">
        <li><a href="#" data-id="Tom Tailer" id="Tom Tailer">Tom Tailer</a></li>
        <li><a href="#" data-id="Pepe Jeans" id="Pepe Jeans">Pepe Jeans</a></li>
        <li><a href="#" data-id="Sinet Tech" id="Sinet Tech">Sinet Tech</a></li>
        <li><a href="#" data-id="others" id="others"><span class="glyphicon glyphicon-star"></span> Other</a></li>
    </ul>
</div>

我的 jquery，

$(document).on('click','.countries li a',function(){
    c=$(this).attr('data-id');
    alert(c);
});

 $(document).on('click','.category li a',function(){
    c=$(this).attr('data-id');
    alert(c);
 });

例如，我在国家/地区下拉列表中单击印度，然后在类别列表中单击 Tom tailer。我想要结果 india 以及 Tom tailer。

Answer 1

我理解这个问题是要求一个函数使用相同的代码从任一列表中获取值。

我的实现(欢迎改进): http://codepen.io/anon/pen/GpJvXx

$(document).ready( function () {

  var getListAttributes = function (selector) {
    listValue = selector.attr('data-value');
    alert(listValue);
  }

  $(document).on('click','.js-select a', function() {
      getListAttributes($(this));
   });
});